Mask won't let me enter last digit when using Date mask

[nelson777]

I'm having a problem using Date type mask with angular-imask: it wont let me enter the last digit. I rechecked thing several times and can't find anything wrong. Can anybody help please ? is this a bug in angular-imask ?

This is the configuration I'm using:

 imaskDate = {
   mask: Date,

   pattern: 'd/`m/`Y',

   blocks: {
     d: {
       mask: IMask.MaskedRange,
       from: 1,
       to: 31,
       maxLength: 2,
     },
     m: {
       mask: IMask.MaskedRange,
       from: 1,
       to: 12,
       maxLength: 2,
     },
     Y: {
       mask: IMask.MaskedRange,
       from: 1900,
       to: 9999,
     }
   },
   lazy: false,
  };

The mask loads correctly, everything works ok, until I try to input the last digit :/

Here is a working example showing the problem: https://stackblitz.com/edit/angular-tzovqf

[guilhermewaess]

@nelson777 you have to provide the parse and format functions.

https://imask.js.org/guide.html#masked-date

[akonwi]

@guilhermewaess I don't think that's the issue because I added parse and format functions to that example and it still doesn't work. I'm also experiencing the same issue using the React library and I have both parse and format functions. With some logging in both those functions, I see that they are being invoked correctly on the last keystroke but the UI doesn't reflect the last digit.

[guilhermewaess]

@akonwi I had the same problem (with react-imask though) and the issue was the format/parse functions returning wrong values.

The only thing different from my code and the code above is the pattern:

pattern: 'd{/}`m{/}`Y'

[akonwi]

@guilhermewaess I see. I realize now my format function was returning the wrong values. Thank you!

[nelson777]

Well I added the functions, but this time I didn't only copyied them from the example. I inverted the day and year to reflect date as is in the mask. This time it worked.
Please check the example and see it's working.

But I found another thing: if we use the dd/mm/yyyy format and you start typing the date with a day that is valid in a month and not valid in other month (say 31/04), when you try to enter the year it doesn't allow the last digit to be entered as it's an invalid date. Same goes for 30/02 or even for 29/02 if your last digit is not from a leap year.

This is probably because the format used to test this was yyyy-mm-dd. It's ok to block if your're typing the day as the last field because you see clearly you're entering something wrong. But if you already typed the day and month, you tend to think they are ok, so when the last digit from the year can't be typed, the user impression is that there is a bug in the component, not a problem with the typed date.

You may think someone blocking by this kind of thing is really stupid. But from a developer's point-of-view, this is the kind of thing that generates calls to the support. I'd rather not use Date type mask and put just a pattern match without the extra date formatting bits and validate in the component.

My suggestion: you already do validation before the whole date is completed as you can't start a dd formated day with 5 for example. So why don't validate day and month pair when day/month come first in the format ?

[guilhermewaess]

Yes, you have to create your format/parse function to attend your pattern.

I'm not from the Imask team but looking into your suggestion I guess they have way more things to take into consideration, so it's not so simple to validate date and month paired, right? because each char should match with the following char and then validate the month and then validate the day month year. Not sure what you were expecting here.

And btw, IMO the way that they validate actually is pretty cool, there's no state actually if the user fills 29/02 he is forced to fill a leap year. If you need something different from that, my suggestion is: just drop the masked input and go for a calendar component.

[nelson777]

ok thanks for your analysis :)

[nelson777]

Hoping to hear from IMask team on this issue :)

[ml-devninja]

I'm facing the same issue - but funny thig that if I pass patter d.m.Y everything (no escaped chars and so on jus a string) works well but if I'll switch Year with day: Y.m.d only then I'm not able to enter last digit 😕

React props:

  pattern={'d.m.Y'}
  mask={Date}

that makes it even more interesting as there can be some parsing/formatting issue under the hood 🤔

[MaiconGilton]

I face the same issue.
Somehow it was fixed by removing format/parse functions and adding validate={() => { }}

[cptcrunchy]

For anyone who continues to run into this issue as of the date of my comment. I found out that my issue was in the parser method. It was having trouble parsing the string into a new Date. So below is how I addressed my issue. Hopefully it will help others:

// define str => date conversion
parse: function (str: any) {
 	console.log("parser", str)
	let dayMonthYear = str.split('-'); // Be mindful of the format being used ( .  or /  or - )
	return new Date(`${dayMonthYear[2]}-${dayMonthYear[1] - 1}-${dayMonthYear[0]}`)
},