Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why can't I input the last number of the year in an angular-imask component?

I'm trying to configure angular-imask for a field, but it won't let me input the last digit in year. It presents the mask correctly and I can type fine but it blocks further typing after 3rd digit. This is the mask I'm using:

  imaskDate = {
   mask: Date,

   pattern: 'd/`m/`Y',  // Pattern mask with defined blocks, default is '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,
  };

I couldn't make the code work in code snippet. It's working here:

https://stackblitz.com/edit/angular-tzovqf

Anyone knows what's happening here ?

EDIT

This is a question that was inactive for 2 1/2 years. I don't remember exactly what was happening at the time and I couldn't reproduce the problem now. I think this may be due to some older browser versions and/or libs. So I can't accept any of the answers.

Following the advices in this meta question and as this question is receiving answers now, I won't delete it.

I ask @iateadonut and @abdessamad-aboukdir that answered to please post the environment where this problem is still happening so I can try to reproduce the problem again. Browser version, OS, Angular version and any relevant info.

I will only accept an answer when someone can provide evidence of how can I create an example of this problem happening or a working example where the problem is occurring. Otherwise it will remain active but unanswered.

If any moderator thinks I should take any other action, feel free to give any instructions you'd like.

like image 298
Nelson Teixeira Avatar asked Oct 20 '25 09:10

Nelson Teixeira


2 Answers

I could not get it to work with the Date mask, but this works (from the github page: https://github.com/uNmAnNeR/imaskjs/issues/557 ):

const maskProps = {
        mask: 'd/m/Y',
        lazy: false,
        overwrite: true,
        autofix: true,
        blocks: {
            d: { mask: MaskedRange, placeholderChar: 'd', from: 1, to: 31, maxLength: 2 },
            m: { mask: MaskedRange, placeholderChar: 'm', from: 1, to: 12, maxLength: 2 },
            Y: { mask: MaskedRange, placeholderChar: 'Y', from: 1900, to: 2999, maxLength: 4 },
        },
}
like image 91
iateadonut Avatar answered Oct 21 '25 22:10

iateadonut


Add autofix: true to your mask, to adapt the value to the accepted range of each block

like image 24
Abdessamad ABOUKDIR Avatar answered Oct 21 '25 22:10

Abdessamad ABOUKDIR



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!