MUI (v5) Datepicker 中只有两位数的年份输入

Question

我正在使用 MUI (v5) Datepicker 进行用户生日输入。我已将其本地化为德语。所以输入是DD.MM.YYYY。

现在许多德国用户都在使用像DD.MM.YY 这样的短年份值。但是这个输入会导致错误的值：

输入05.01.20 给我Sun Jan 05 0020 00:00:00 GMT+0053。这导致我遇到两个问题：

1. 如何“强制”用户输入四位数年份值？输入两位数字会生成有效（但无用）的日期。
2. 或者（这样会更好）我如何检查和处理两位数的年份值？我认为未来的值 (80) 应该被用作 1980 和 18 应该导致 2018。

对我来说，第二点会是更好的解决方案，所以我必须将输入通常设置为格式 DD.MM.YY 并按照描述处理这些输入。但是如何更改 DatePicker 的输入格式呢？

import React from 'react'
import AdapterDateFns from '@mui/lab/AdapterDateFns'
import LocalizationProvider from '@mui/lab/LocalizationProvider'
import DatePicker from '@mui/lab/DatePicker'
import deLocale from 'date-fns/locale/de'
import { toDate, isValid } from 'date-fns'

const Component = () => {
    const [birthday, setBirthday] = React.useState<Date>(null)
    const handleDateChange = (value: any) => {
        console.log(isValid(value))
        setBirthday(toDate(value))
    }
    
    return (
        <LocalizationProvider dateAdapter={AdapterDateFns} locale={deLocale}>
            <DatePicker
                disableFuture
                mask="__.__.____"
                value={birthday}
                onChange={handleDateChange}
                renderInput={(params) => (
                <TextField {...params} />
                )}
            />
        </LocalizationProvider>
    )
}

Answer 1

这类问题始终是一个平衡问题。对于最终用户和开发人员来说，哪种方法更有效、更实用？

作为法国人，我理解两位数的年份，但在我看来这不值得麻烦。

是的，最终用户必须输入 4 位数字而不是 2 位（这就像他的时间的 0.5 秒），但是您不必花费 2 或 3 小时（或更多）来尝试处理所有具体情况，并冒险保存无效日期。例如，如果用户输入 60（可以是“未来”值 2060，也可以是旧值 1960）会发生什么？

话虽如此，我相信您可以通过inputFormat 属性修改DatePicker 的输入格式来实现您想要的。你必须测试一下，因为the docs 关于这个道具不是很……广泛。

对于解决方案 1，DatePicker 中有验证器，例如 1900 年之前的所有年份都无效。我相信您也可以更改验证器以满足您的需求。

---

编辑：我已经建立了一个最小的环境来摆弄你的代码，并提出了一个（有点半熟的）解决方案。

正如你在这个CodeSandBox 中看到的，我们可以利用getYear 方法来告诉我们年份是否在1900 年之后。它返回 1900 年与输入之间的差异。因此，例如，如果我们输入 199，它将返回 -1701。相反，如果我们输入 2021，它将返回 121。这就是我们的第一个验证。

我们还需要通过向DatePicker 提供我们自己的onError 函数来处理其他情况。

请注意，对于年份 > 1900 和

最后，如果我们真的想要一个 2 位格式的日期并且 ONLY 用于显示目的（或存储字符串类型的日期），我们可以利用函数format 来自date-fns。