Only two digit year input in MUI (v5) Datepicker

user_3142695 0
Viewed 915

I'm using the MUI (v5) Datepicker for user birthday input. I've localized it to german language. So the input is DD.MM.YYYY.

Now many german users are using a short year value like DD.MM.YY. But this input would result in wrong values:

Input 05.01.20 gives me Sun Jan 05 0020 00:00:00 GMT+0053. This leads me to two problems:

  1. How can I 'force' the user to input four digit year values? Typing two digits results in a valid (but useless) date.
  2. Or (and this would be better) how can I check and handle two digit year values? I would think future values (80) should get used as 1980 and 18 should result in 2018.

For me, the second point would be the better solution, so I would have to set the input generally to the format DD.MM.YY and handle those inputs as described. But how do I change 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>
    )
}
date-fns material-ui javascript
1 Answers

It's always a question of balance for these kind of problems. What would be the more efficient and practical for both the end-user and the developer?

Being french, I understand the two-digits years thing, but it's not worth the hassle in my opinion.

Yes, the end-user would have to input 4 digits instead of 2 (that's like, 0.5s of his time anyway), but then you don't have to spend 2 or 3 hours (or more) to try and handle all the specific cases, and take the risk to save invalid dates. For example, what happens if the user input 60 (which can be a "future" value, 2060, as well as an old value, 1960)?

That being said, you could probably achieve what you want by modifying the input format of a DatePicker via the inputFormat prop I believe. You'll have to tests things out though since the docs regarding this prop are not very ... extensive.

For the solution 1, there are validators within DatePicker, for example all the years before 1900 aren't valid. I believe you can also change the validators to fit your needs.

EDIT: I've set up a minimal environment to fiddle around with your code and came up with a (somewhat half-cooked) solution.

As you can see in this CodeSandBox, we can take advantage of the method getYear to tell us if the year is after 1900 or not. It returns the difference between the year 1900 and the input. So if we input 199 for example, it'll return -1701. On the contrary, if we input say, 2021, it'll return 121. That makes our first validation.

We also need to handle other cases by providing to DatePicker our own onError function.

Be aware that for dates with year > 1900 and <= 1911, the Greenwich Mean Time seems broken. (+9)

Finally, if we really want a 2-digit formatted date and ONLY for display purposes (or storing a string-typed date), we can take advantage of the function format from date-fns.

user_54677100
Related