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 })} /> +