Limit the Datepicker in MUI (v5) to only accept two-digit years

Question

Limit the Datepicker in MUI (v5) to only accept two-digit years

I am currently using the MUI (v5) Datepicker for capturing user birthday information. The Datepicker has been localized to German language, resulting in the input format DD.MM.YYYY.

However, many German users prefer using a shorter year format like DD.MM.YY. This causes incorrect values to be displayed:

Entering 05.01.20 displays

Sun Jan 05 0020 00:00:00 GMT+0053

. This presents two issues:

How can I enforce four-digit year inputs? Entering two digits results in a valid but inaccurate date.
Alternatively, is there a way to validate and process two-digit year inputs? For instance, entering 80 should translate to 1980, while 18 should represent 2018.

A potential solution could be adjusting the input format of the DatePicker to DD.MM.YY and handling such inputs accordingly. How can I modify the input format of the 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>
    )
}

javascript material-ui date-fns

Answer 1

Answer №1

When dealing with these types of issues, the key is finding a balance that works well for both the end-user and the developer.

As someone from France, I understand the concept of two-digit years, but personally, I don't think it's worth the trouble.

While asking the end-user to input 4 digits instead of 2 may take a fraction of a second more, it saves countless hours spent trying to handle all the different scenarios and avoiding invalid dates. For instance, what if a user inputs 60 - is it meant to be interpreted as 2060 or 1960?

To address this issue, you could potentially adjust the input format of a DatePicker component using the inputFormat prop. However, thorough testing would be necessary since the documentation on this aspect might not be very comprehensive.

If we consider solution 1, there are validators in the DatePicker that exclude years before 1900 as valid. These validators can likely be customized to suit your requirements.

In an attempt to find a solution, I have created a barebones setup to experiment with your code and devised a somewhat preliminary approach.

You can observe the implementation in this CodeSandBox, where we leverage the method getYear to determine whether the year is beyond 1900. This method calculates the difference between the input year and the year 1900. For instance, entering 199 would yield -1701, whereas inputting 2021 would produce 121 - serving as our initial validation.

Additional cases need to be addressed by supplying our custom onError function to the DatePicker component.

It should be noted that for dates falling within the range of > 1900 and <= 1911, there seems to be an anomaly in Greenwich Mean Time. (+9)

In conclusion, if there is a genuine requirement for a 2-digit date format solely for display purposes (or storage as a string), utilizing the format function from date-fns might prove beneficial.

Answer 2