diff --git a/frontend/src/components/BuyDialog.tsx b/frontend/src/components/BuyDialog.tsx index 918a285..6acfdd3 100644 --- a/frontend/src/components/BuyDialog.tsx +++ b/frontend/src/components/BuyDialog.tsx @@ -9,8 +9,19 @@ import { Box, } from '@mui/material'; import { NewStock } from '../types/types'; -import DatePicker from 'react-datepicker'; +import DatePicker, { registerLocale } from 'react-datepicker'; +import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート +// 日付をyyyy-MM-dd形式で返す関数 +const formatDateLocal = (date: Date) => { + const year = date.getFullYear(); + const month = (date.getMonth() + 1).toString().padStart(2, '0'); + const day = date.getDate().toString().padStart(2, '0'); + return `${year}-${month}-${day}`; +}; + +// 日本語ロケールを登録 + registerLocale('ja', ja); const BuyDialog = ({ openDialog, @@ -25,7 +36,7 @@ const BuyDialog = ({ setNewStock: (tobuy: NewStock) => void, onSubmit: () => void, }) => { - + return ( @@ -55,7 +66,7 @@ const BuyDialog = ({ popperClassName="custom-datepicker-popper" selected={newStock.buyDate ? new Date(newStock.buyDate) : null} onChange={(date) => - setNewStock({ ...newStock, buyDate: date ? date.toISOString().split('T')[0] : '' }) + setNewStock({ ...newStock, buyDate: date ? formatDateLocal(date) : '' }) } dateFormat="yyyy/MM/dd" customInput={ @@ -82,7 +93,7 @@ const BuyDialog = ({ popperClassName="custom-datepicker-popper" selected={newStock.expDate ? new Date(newStock.expDate) : null} onChange={(date) => - setNewStock({ ...newStock, expDate: date ? date.toISOString().split('T')[0] : '' }) + setNewStock({ ...newStock, expDate: date ? formatDateLocal(date) : '' }) } dateFormat="yyyy/MM/dd" customInput={ diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx index 7e91f1d..2aa95ba 100644 --- a/frontend/src/pages/StockPage.tsx +++ b/frontend/src/pages/StockPage.tsx @@ -27,21 +27,34 @@ import { MenuItem, } from '@mui/material'; import { STOCK_ERRORS } from '../constants/errorMessages'; +import DatePicker, { registerLocale } from 'react-datepicker'; +import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート + +// 日付をyyyy-MM-dd形式で返す関数 +const formatDateLocal = (date: Date) => { + const year = date.getFullYear(); + const month = (date.getMonth() + 1).toString().padStart(2, '0'); + const day = date.getDate().toString().padStart(2, '0'); + return `${year}-${month}-${day}`; +}; // 新規在庫の初期状態 const EMPTY_STOCK: Omit & { stuffId: number | null } & { newAddition: boolean } = { stuffId: null, stuffName: '', - amount: 0, + amount: 1, price: 0, lastUpdate: '', - buyDate: '', + buyDate: new Date().toISOString(), expDate: '', category: '', newAddition: false, // 材料を新規作成するか否か // shop '', } +// 日本語ロケールを登録 +registerLocale('ja', ja); + const StockPage: React.FC = () => { const [stocks, setStocks] = useState([]); @@ -86,6 +99,9 @@ const StockPage: React.FC = () => { if (newStock.newAddition) { newStock.stuffId = null; } + if (isNaN(newStock.amount)) return; + if (isNaN(newStock.price)) return; + console.log(newStock) const today = new Date().toISOString().substring(0, 10); @@ -381,7 +397,7 @@ const StockPage: React.FC = () => { 在庫一覧 - + {/* 在庫の食材追加ボタン */}