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的输入格式来实现您想要的。 不过，由于有关此道具的文档不是很...广泛，因此您必须进行测试。

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