Jquery mask input for dates

JavaScript
1

Hi all
Im trying to mask a date using the format dd/mm/yyyy.

So far I have:

$("input[name='DOB[]']").mask('12/34/5678', {
            placeholder: "__/__/__",
            'translation': {
                1: {pattern: /[0-3*]/},
                2: {pattern: /[0-9*]/},
                3: {pattern: /[0-1*]/},
                4: {pattern: /[0-9*]/},
				5: {pattern: /[1*]/},
				6: {pattern: /[9*]/},
				7: {pattern: /[0-9*]/},
				8: {pattern: /[0-9*]/},
            }
        });

However, this still allows erroneous input such as 39/19/1999 (where 39 is days and 19 is months).

I cant find a solution anywhere! All the date masking Ive found allow any numbers to be inputted, so mine is a little more strict, but still not enough. Any ideas?

Thanks

2

If you don’t have to support ancient browsers, why no going for a date type input?

1 Like
3

The mask also accepts a callback, so you could set the day/month/year as values of a date object and then check if the date object still contains what you expect.

4

be aware, that US visitors may enter the date as mm/dd/yyyy out of habit (and even reject the possibility that dd/mm/yyyy would be a date format at all).

5

It’s tempting to use the placeholder to clue people in to the format, but the placeholder is not guaranteed to appear and so isn’t a good place to show important information like that.

Placing the date format information beside the date entry field is recommended.

6

Can you point me to a callback example?

7

Here you go → https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html#callback-examples

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.