How to change date format to slash instead of dot?

[Arcanorum]

What problem you are trying to solve?
A clear and concise description of what the problem is.
Currently the date mask displays as 23.08.2021

Describe the solution you'd like
A clear and concise description of what you want to happen.
I need to show my dates as 23/08/2021 with slashes instead.
How might I do this? Can't find anything about this in the docs.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Currently just using a custom mask with the format I need.

[uNmAnNeR]

Did you check https://imask.js.org/guide.html#masked-date ?

[fabriciosouzza]

Hi @uNmAnNeR, for some reason when I use 'd/m/Y' I receive a completely incorrect date.

Code:

<Controller
  name="dateInstallationPool"
  control={control}
  render={({ field: { onBlur, onChange, value } }) => (
    <IMaskInput
      value={value}
      onAccept={onChange}
      onBlur={onBlur}
      className="bg-gray-100 text-base font-light w-full rounded-md px-2 py-2 outline-none focus:ring-2 focus:ring-blue-200 placeholder:text-sm"
      placeholder={'Data da instalação *'}
      mask={Date}
      pattern='d/`m/`Y'
      format={(date: any) => {
        let day = date.getDate();
        let month = date.getMonth() + 1;
        let year = date.getFullYear();
        console.log('date: ', date)
        console.log('valor: ', value)
    
        if (day < 10) day = "0" + day;
        if (month < 10) month = "0" + month;
        console.log('data do input: ', [day, month, year].join('/'))
        return [day, month, year].join('/');
      }}
      parse={str => {
        const dayMonthYear = str.split('/');
        console.log('parse: ', new Date(Number(dayMonthYear[0]), Number(dayMonthYear[1]) - 1, Number(dayMonthYear[2])))
        return new Date(Number(dayMonthYear[0]), Number(dayMonthYear[1]) - 1, Number(dayMonthYear[2]))
      }}
      autofix
      overwrite
      min={new Date(1996, 0, 1)}
      max={new Date()}
      
    />
  )}
/>

'd/m/Y' log:

In this image of logs, I use the 'd/m/Y' pattern, and typing ’20/10/1999’ (look at the “valor: ” log that I can’t type the last number) return “19/03/1926”

'd/m/Y' log:

Now, when I use the 'd/m/Y' pattern, the “date”, “parse” and “data do input” show that the date was correctly set, but the “valor” maintain without the last number.

In both cases, I can’t type and view the last number on the date input
I already read the https://imask.js.org/guide.html#masked-date (including the "Please note" section), but I don’t understand how I can handle this divider change. Can you enlighten me on this topic?

[uNmAnNeR]

@fabriciosouzza in Date constructor year should go first. To check if you did all correct this should be true: value = format(parse(date))