diff --git a/frontend/src/components/BuyDialog.tsx b/frontend/src/components/BuyDialog.tsx
index c0bd566..33c85ba 100644
--- a/frontend/src/components/BuyDialog.tsx
+++ b/frontend/src/components/BuyDialog.tsx
@@ -9,6 +9,7 @@ import {
Box,
} from '@mui/material';
import { NewStock } from '../types/types';
+import BuyExpDateSelect from './BuyExpDateSelect';
/*import DatePicker, { registerLocale } from 'react-datepicker';
import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート*/
@@ -89,73 +90,9 @@ const BuyDialog = ({
sx={{ marginBottom: 2 }}
/>
- {/* 購入日・消費期限を横並びに */}
-
- {/* 購入日入力フィールド */}
-
- setNewStock({ ...newStock, buyDate: e.target.value })
- }
- InputLabelProps={{ shrink: true }}
- />
- {/*
- setNewStock({ ...newStock, buyDate: date ? formatDateLocal(date) : '' })
- }
- dateFormat="yyyy/MM/dd"
- customInput={
-
- }
- isClearable
- //withPortal // ← 他の文字との重なり対策
- />*/}
+ {/* 購入日・賞味期限入力 */}
+ setNewStock({...newStock, buyDate, expDate}) } />
- {/* 消費・賞味期限入力フィールド */}
-
- setNewStock({ ...newStock, expDate: e.target.value })
- }
- InputLabelProps={{ shrink: true }}
- InputProps={{
- inputProps: {
- min: newStock.buyDate ? newStock.buyDate.substring(0, 10) : undefined,
- }
- }}
- />
- {/*
- setNewStock({ ...newStock, expDate: date ? formatDateLocal(date) : '' })
- }
- dateFormat="yyyy/MM/dd"
- customInput={
-
- }
- isClearable
- //withPortal
- />*/}
-
{/* 購入店舗入力フィールド */}
date ? date.substring(0, 10) : '')
+
+// 今日の日付
+const today = parseDate(new Date().toISOString());
+
+// 日付文字列で早いほうを返す(空でないものは除く)
+const validateBuyDate = ((buyDate: string) => {
+ // console.log('validateBuyDate:', buyDate)
+ if (!buyDate) { // 購入日が未設定の場合は今日の日付を入れておく
+ return today;
+ }
+ return parseDate(buyDate);
+})
+
+// 日付文字列で早いほうを返す(空でないものは除く)
+const validateExpDate = ((buyDate: string, expDate: string) => {
+ // console.log('validateExpDate:', buyDate, expDate)
+ if (!expDate) { // 賞味期限が未設定の場合そのまま未設定にする
+ return '';
+ }
+ const buyDateParsed = validateBuyDate(buyDate);
+ const expDateParsed = parseDate(expDate);
+ // 購入日以降となるようにする
+ return buyDateParsed > expDateParsed ? buyDateParsed : expDateParsed;
+})
+
+const BuyExpDateSelect = ({
+ newStock,
+ setNewStock,
+}: {
+ newStock: {buyDate: string, expDate: string},
+ setNewStock: (tobuy: {buyDate: string, expDate: string}) => void,
+}) => {
+
+ {/* 購入日・消費期限を横並びに */ }
+ return
+ {/* 購入日入力フィールド */}
+
+ setNewStock({ ...newStock, buyDate: e.target.value })
+ }
+ InputLabelProps={{ shrink: true }}
+ InputProps={{
+ inputProps: {
+ max: today,
+ }
+ }}
+ />
+
+ {/* 消費・賞味期限入力フィールド */}
+
+ setNewStock({ ...newStock, expDate: e.target.value })
+ }
+ InputLabelProps={{ shrink: true }}
+ InputProps={{
+ inputProps: {
+ min: validateBuyDate(newStock.buyDate),
+ }
+ }}
+ />
+
+
+
+}
+
+export default BuyExpDateSelect;
\ No newline at end of file
diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx
index 899bce1..74bbf62 100644
--- a/frontend/src/pages/StockPage.tsx
+++ b/frontend/src/pages/StockPage.tsx
@@ -31,6 +31,7 @@ import { Add as AddIcon } from '@mui/icons-material';
/*import DatePicker, { registerLocale } from 'react-datepicker';
import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート*/
import { useMessage } from '../components/MessageContext';
+import BuyExpDateSelect from '../components/BuyExpDateSelect';
/*// 日付をyyyy-MM-dd形式で返す関数
const formatDateLocal = (date: Date) => {
@@ -479,79 +480,9 @@ const StockPage: React.FC = () => {
onChange={handleChange}
/>
- {/* 購入日・消費期限を横並びに */}
-
- {/* 購入日 */}
- setEditStock({ ...editStock, buyDate: e.target.value })}
- InputLabelProps={{ shrink: true }}
- />
- {/* {
- if (editStock) {
- setEditStock({
- ...editStock,
- buyDate: date ? formatDateLocal(date) : '',
- });
- }
- }}
- dateFormat="yyyy/MM/dd"
- customInput={
-
- }
- isClearable
- />*/}
- {/* 消費・賞味期限 */}
- setEditStock({ ...editStock, expDate: e.target.value })}
- InputLabelProps={{ shrink: true }}
- InputProps={{
- inputProps: {
- min: newStock.buyDate ? newStock.buyDate.substring(0, 10) : undefined,
- }
- }}
- />
-
- {/* {
- if (editStock) {
- setEditStock({
- ...editStock,
- expDate: date ? formatDateLocal(date) : '',
- });
- }
- }}
- dateFormat="yyyy/MM/dd"
- customInput={
-
- }
- isClearable
- />*/}
-
+ {/* 購入日・賞味期限入力 */}
+ setEditStock({ ...editStock, buyDate, expDate })} />
+
diff --git a/frontend/src/pages/TaskListPage.tsx b/frontend/src/pages/TaskListPage.tsx
index 51a7f06..bc5b43a 100644
--- a/frontend/src/pages/TaskListPage.tsx
+++ b/frontend/src/pages/TaskListPage.tsx
@@ -69,8 +69,8 @@ const TaskListPage: React.FC = () => {
amount: '', // 購入数量(ここではstring)
price: '', // ここではstring
shop: '',
- buyDate: new Date().toISOString(),
- expDate: '',
+ buyDate: '', // 日付選択側で今日の日付がデフォルトで選択されている
+ expDate: '', // 未設定状態
});
//削除確認ダイアログの表示状態