不具合修正

frontend/src/components/BuyDialog.tsx

@@ -9,6 +9,7 @@ import {
     Box,
 } from '@mui/material';
 import { NewStock } from '../types/types';
+import DatePicker from 'react-datepicker';
 
 
 const BuyDialog = ({
@@ -46,22 +47,54 @@ const BuyDialog = ({
                             };
                         }}
                     />
-                    {/* 購入日入力フィールド */}
-                    <TextField
-                        margin="dense"
-                        label="購入日(yyyy/MM/dd)"
-                        fullWidth
-                        value={newStock.buyDate}
-                        onChange={(e) => setNewStock({ ...newStock, buyDate: e.target.value })}
-                    />
-                    {/* 消費・賞味期限入力フィールド */}
-                    <TextField
-                        margin="dense"
-                        label="消費・賞味期限(yyyy/MM/dd)"
-                        fullWidth
-                        value={newStock.expDate}
-                        onChange={(e) => setNewStock({ ...newStock, expDate: e.target.value })}
-                    />
+                    {/* 購入日・消費期限を横並びに */}
+                    <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
+                        {/* 購入日入力フィールド */}
+                        <DatePicker
+                            popperClassName="custom-datepicker-popper"
+                            selected={newStock.buyDate ? new Date(newStock.buyDate) : null}
+                            onChange={(date) =>
+                                setNewStock({ ...newStock, buyDate: date ? date.toISOString().split('T')[0] : '' })
+                            }
+                            dateFormat="yyyy/MM/dd"
+                            customInput={
+                                <TextField
+                                    margin="dense"
+                                    label="購入日(yyyy/MM/dd)"
+                                    fullWidth
+                                />
+                            }
+                            isClearable
+                        //withPortal // ← 他の文字との重なり対策
+                        />
+                        {/*
+            <TextField
+              margin="dense"
+              label="購入日(yyyy/MM/dd)"
+              fullWidth
+              value={newStock.buyDate}
+              onChange={(e) => setNewStock({ ...newStock, buyDate: e.target.value })}
+            />
+            */}
+                        {/* 消費・賞味期限入力フィールド */}
+                        <DatePicker
+                            popperClassName="custom-datepicker-popper"
+                            selected={newStock.expDate ? new Date(newStock.expDate) : null}
+                            onChange={(date) =>
+                                setNewStock({ ...newStock, expDate: date ? date.toISOString().split('T')[0] : '' })
+                            }
+                            dateFormat="yyyy/MM/dd"
+                            customInput={
+                                <TextField
+                                    margin="dense"
+                                    label="消費・賞味期限(yyyy/MM/dd)"
+                                    fullWidth
+                                />
+                            }
+                            isClearable
+                        //withPortal
+                        />
+                    </Box>
                     {/* 購入店舗入力フィールド  */}
                     {/* TODO: 実装 */}
                     <TextField

frontend/src/components/Layout.tsx

@@ -99,7 +99,7 @@ const Layout: React.FC = () => {
               selected={isSelected('/tasks')}
             >
               <ListItemIcon><ListAltIcon /></ListItemIcon>
-              <ListItemText primary="タスク一覧" />
+              <ListItemText primary="買うものリスト" />
             </ListItemButton>
             {/* テストページへのリンクを追加 */}