OS標準のカレンダー設定

frontend/src/components/BuyDialog.tsx

@@ -9,19 +9,19 @@ import {
     Box,
 } from '@mui/material';
 import { NewStock } from '../types/types';
-import DatePicker, { registerLocale } from 'react-datepicker';
+/*import DatePicker, { registerLocale } from 'react-datepicker';
-import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート
+import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート*/
 
-// 日付をyyyy-MM-dd形式で返す関数
+/*// 日付をyyyy-MM-dd形式で返す関数
 const formatDateLocal = (date: Date) => {
-  const year = date.getFullYear();
+    const year = date.getFullYear();
-  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
-  const day = date.getDate().toString().padStart(2, '0');
+    const day = date.getDate().toString().padStart(2, '0');
-  return `${year}-${month}-${day}`;
+    return `${year}-${month}-${day}`;
-};
+};*/
 
 // 日本語ロケールを登録
-    registerLocale('ja', ja);
+//registerLocale('ja', ja);
 
 const BuyDialog = ({
     openDialog,
@@ -38,12 +38,12 @@ const BuyDialog = ({
     setNewStock: (tobuy: NewStock) => void,
     onSubmit: () => void,
 }) => {
-    
+
     return (
 
 
         <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minHeight: '600px', maxHeight: '80vh' } }}
->
+        >
             <DialogTitle>在庫登録</DialogTitle>
             <DialogContent>
                 <Box sx={{ pt: 1 }}>
@@ -54,7 +54,7 @@ const BuyDialog = ({
                         fullWidth
                         value={stuffName}
                         disabled
-                        sx={{ marginBottom: 2 , marginTop: 2}}
+                        sx={{ marginBottom: 2, marginTop: 2 }}
                     />
 
                     {/* 価格入力フィールド */}
@@ -75,7 +75,18 @@ const BuyDialog = ({
                     {/* 購入日・消費期限を横並びに */}
                     <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
                         {/* 購入日入力フィールド */}
-                        <DatePicker
+                        <TextField
+                            margin="dense"
+                            label="購入日"
+                            type="date"
+                            fullWidth
+                            value={newStock.buyDate ? newStock.buyDate.substring(0, 10) : ''}
+                            onChange={(e) =>
+                                setNewStock({ ...newStock, buyDate: e.target.value })
+                            }
+                            InputLabelProps={{ shrink: true }}
+                        />
+                        {/*<DatePicker
                             popperClassName="custom-datepicker-popper"
                             selected={newStock.buyDate ? new Date(newStock.buyDate) : null}
                             onChange={(date) =>
@@ -91,18 +102,26 @@ const BuyDialog = ({
                             }
                             isClearable
                         //withPortal // ← 他の文字との重なり対策
-                        />
+                        />*/}
-                        {/*
+
-            <TextField
-              margin="dense"
-              label="購入日(yyyy/MM/dd)"
-              fullWidth
-              value={newStock.buyDate}
-              onChange={(e) => setNewStock({ ...newStock, buyDate: e.target.value })}
-            />
-            */}
                         {/* 消費・賞味期限入力フィールド */}
-                        <DatePicker
+                        <TextField
+                            margin="dense"
+                            label="消費・賞味期限"
+                            type="date"
+                            fullWidth
+                            value={newStock.expDate ? newStock.expDate.substring(0, 10) : ''}
+                            onChange={(e) =>
+                                setNewStock({ ...newStock, expDate: e.target.value })
+                            }
+                            InputLabelProps={{ shrink: true }}
+                            InputProps={{
+                                inputProps: {
+                                    min: newStock.buyDate ? newStock.buyDate.substring(0, 10) : undefined,
+                                }
+                            }}
+                                    />
+                                {/*<DatePicker
                             popperClassName="custom-datepicker-popper"
                             selected={newStock.expDate ? new Date(newStock.expDate) : null}
                             onChange={(date) =>
@@ -118,7 +137,7 @@ const BuyDialog = ({
                             }
                             isClearable
                         //withPortal
-                        />
+                        />*/}
                     </Box>
                     {/* 購入店舗入力フィールド  */}
                     {/* TODO: 実装 */}

frontend/src/pages/StockPage.tsx

@@ -27,17 +27,17 @@ import {
   MenuItem,
 } from '@mui/material';
 import { STOCK_ERRORS } from '../constants/errorMessages';
-import DatePicker, { registerLocale } from 'react-datepicker';
+/*import DatePicker, { registerLocale } from 'react-datepicker';
-import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート
+import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート*/
 import { useMessage } from '../components/MessageContext';
 
-// 日付をyyyy-MM-dd形式で返す関数
+/*// 日付を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<Stock, 'stockId' | 'stuffId'> & { stuffId: number | null } & { newAddition: boolean } = {
@@ -54,7 +54,7 @@ const EMPTY_STOCK: Omit<Stock, 'stockId' | 'stuffId'> & { stuffId: number | null
 }
 
 // 日本語ロケールを登録
-registerLocale('ja', ja);
+//registerLocale('ja', ja);
 
 const StockPage: React.FC = () => {
 
@@ -380,7 +380,17 @@ const StockPage: React.FC = () => {
                 {/* 購入日・消費期限を横並びに */}
                 <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
                   {/* 購入日 */}
-                  <DatePicker
+                  <TextField
+                    margin="normal"
+                    label="購入日"
+                    type="date"
+                    fullWidth
+                    name="buyDate"
+                    value={editStock.buyDate ? editStock.buyDate.substring(0, 10) : ''}
+                    onChange={(e) => setEditStock({ ...editStock, buyDate: e.target.value })}
+                    InputLabelProps={{ shrink: true }}
+                  />
+                  {/*<DatePicker
                     selected={editStock.buyDate ? new Date(editStock.buyDate) : null}
                     onChange={(date) => {
                       if (editStock) {
@@ -400,9 +410,25 @@ const StockPage: React.FC = () => {
                       />
                     }
                     isClearable
-                  />
+                  />*/}
                   {/* 消費・賞味期限 */}
-                  <DatePicker
+                  <TextField
+                    margin="normal"
+                    label="消費・賞味期限"
+                    type="date"
+                    fullWidth
+                    name="expDate"
+                    value={editStock.expDate ? editStock.expDate.substring(0, 10) : ''}
+                    onChange={(e) => setEditStock({ ...editStock, expDate: e.target.value })}
+                    InputLabelProps={{ shrink: true }}
+                    InputProps={{
+                      inputProps: {
+                        min: newStock.buyDate ? newStock.buyDate.substring(0, 10) : undefined,
+                      }
+                    }}
+                  />
+
+                  {/*<DatePicker
                     selected={editStock.expDate ? new Date(editStock.expDate) : null}
                     onChange={(date) => {
                       if (editStock) {
@@ -422,7 +448,7 @@ const StockPage: React.FC = () => {
                       />
                     }
                     isClearable
-                  />
+                  />*/}
                 </Box>
                 <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 3, mb: 2 }}>
                   <Button onClick={() => { setIsEditOpen(false); setSelectedRow(null); }}>
@@ -601,7 +627,18 @@ const StockPage: React.FC = () => {
               {/* 購入日・消費期限を横並びに */}
               <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
                 {/* 購入日入力フィールド */}
-                <DatePicker
+                <TextField
+                  margin="dense"
+                  label="購入日"
+                  type="date"
+                  fullWidth
+                  value={newStock.buyDate ? newStock.buyDate.substring(0, 10) : ''}
+                  onChange={(e) =>
+                    setNewStock({ ...newStock, buyDate: e.target.value })
+                  }
+                  InputLabelProps={{ shrink: true }}
+                />
+                {/*<DatePicker
                   popperClassName="custom-datepicker-popper"
                   selected={newStock.buyDate ? new Date(newStock.buyDate) : null}
                   onChange={(date) =>
@@ -617,9 +654,25 @@ const StockPage: React.FC = () => {
                   }
                   isClearable
                 //withPortal // ← 他の文字との重なり対策
-                />
+                />*/}
                 {/* 消費・賞味期限入力フィールド */}
-                <DatePicker
+                <TextField
+                  margin="dense"
+                  label="消費・賞味期限"
+                  type="date"
+                  fullWidth
+                  value={newStock.expDate ? newStock.expDate.substring(0, 10) : ''}
+                  onChange={(e) =>
+                    setNewStock({ ...newStock, expDate: e.target.value })
+                  }
+                  InputLabelProps={{ shrink: true }}
+                  InputProps={{
+                    inputProps: {
+                      min: newStock.buyDate ? newStock.buyDate.substring(0, 10) : undefined,
+                    }
+                  }}
+                />
+                {/*<DatePicker
                   popperClassName="custom-datepicker-popper"
                   selected={newStock.expDate ? new Date(newStock.expDate) : null}
                   onChange={(date) =>
@@ -635,7 +688,7 @@ const StockPage: React.FC = () => {
                   }
                   isClearable
                 //withPortal
-                />
+                />*/}
               </Box>
             </Box>
           </DialogContent>