You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.3 KiB
80 lines
2.3 KiB
import { Box, TextField } from "@mui/material"
|
|
|
|
// 日付文字列（時間を含む可能性がある）から日付部分だけを返す
|
|
const parseDate = ((date: string) => 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 | null) => {
|
|
// 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 | null},
|
|
setNewStock: (tobuy: {buyDate: string, expDate: string | null}) => void,
|
|
}) => {
|
|
|
|
{/* 購入日・消費期限を横並びに */ }
|
|
return <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
|
|
{/* 購入日入力フィールド */}
|
|
<TextField
|
|
margin="dense"
|
|
label="購入日"
|
|
type="date"
|
|
fullWidth
|
|
value={validateBuyDate(newStock.buyDate)}
|
|
onChange={(e) =>
|
|
setNewStock({ ...newStock, buyDate: e.target.value })
|
|
}
|
|
InputLabelProps={{ shrink: true }}
|
|
InputProps={{
|
|
inputProps: {
|
|
max: today,
|
|
}
|
|
}}
|
|
/>
|
|
|
|
{/* 消費・賞味期限入力フィールド */}
|
|
<TextField
|
|
margin="dense"
|
|
label="消費・賞味期限"
|
|
type="date"
|
|
fullWidth
|
|
value={validateExpDate(newStock.buyDate, newStock.expDate)}
|
|
onChange={(e) =>
|
|
setNewStock({ ...newStock, expDate: e.target.value ?? null })
|
|
}
|
|
InputLabelProps={{ shrink: true }}
|
|
InputProps={{
|
|
inputProps: {
|
|
min: validateBuyDate(newStock.buyDate),
|
|
}
|
|
}}
|
|
/>
|
|
|
|
</Box>
|
|
|
|
}
|
|
|
|
export default BuyExpDateSelect; |