Specify date format in mask when using an input mask?

Question

I've been using the jquery masked input plugin to apply a date mask to text inputs. This works pretty well, but I want the displayed mask to also show the format. That is, instead of the mask being

__/__/____

I want to be able to specify the format by using a mask of, for example,

dd/mm/yyyy

or (which looks the same with the current mask but is fundamentally different)

mm/dd/yyyy

I can't see how to do this with that plugin (it only accepts one character as the mask character as far as I can see). Is it possible with the current plugin? Does anyone know of an alternative plugin (ideally using jQuery) which can do this? I haven't been able to find anything.

Think this through a bit better. Suppose you could use `dd/mm/yyyy` and then someone types in `29/02/200` (last digit not yet typed in). What should the plugin do for the final digit? Reject all inputs except 0, 4 and 8 without providing feedback? There are lots of examples on this theme. — Jon, Jan 17 '12 at 15:01
Yes, you could validate the date with the mask plugin too - but can you give me an example of a plugin that does this (and has the other behaviour of the mask plugin, such as automatically advancing over the static parts ('/' in the date format)? I already validate the input seperately and am happy with that, what I need is an easy way to tell the end user what format the date should be in. If it can enforce a valid date then great (although I still need to validate that certain dates are before or after others) but that's not a requirment for me — Adam, Jan 18 '12 at 06:09

Whisk · Accepted Answer · 2020-09-21T13:13:37.463

7

This is supported by https://github.com/digitalBush/jquery.maskedinput (now archived - used to be at http://digitalbush.com/projects/masked-input-plugin/) - you just have to specify the full placeholder (see the date demo on that site):

$('#date').mask('99/99/9999',{placeholder:"mm/dd/yyyy"});

edited Sep 21 '20 at 13:13

answered Jul 11 '17 at 23:43

Whisk

3,287
2
30
30

1

Why mask it as 99/99/9999 when no month that reaches 99? Same as day. – Player1 Mar 26 '20 at 20:54
@Whisk - Clicking your link gives "Error establishing a database connection" – dcp Jul 28 '20 at 13:53

Kevin Lee Garner · Answer 2 · 2013-07-10T13:56:49.300

3

I had a similar requirement recently, and the only thing I could find that didn't require me to do a lot of work on tweaking the plugin was to use this modified date masking plugin. It seems to be doing the job so far.

If you want to test it out, head to this page.

The basic implementation we've used with this modified date masker is as follows:

$('#yourInputBoxHere').mask("99/99/9999", {placeholder: 'MM/DD/YYYY' });

I hope this helps.

Update: A word of warning: this plugin seems to be incompatible with later versions of jQuery. I think it's safe for jQuery 1.4 and lower.

edited Jul 10 '13 at 13:56

answered Jul 09 '13 at 19:24

Kevin Lee Garner

857
10
12

Looks like just what I was looking for. Thanks (Caveat: I have tried it at the pages above but have not had time to implement it myself yet) – Adam Jul 10 '13 at 07:19
A word of warning, though, this plugin seems to be incompatible with later versions of jQuery. I think it's safe for jQuery 1.4 and lower. – Kevin Lee Garner Jul 10 '13 at 13:56
Can you update the links? The current ones are dead. – James Oravec Jul 26 '16 at 23:06
Thanks @VenomFangs. I took a look and was able to successfully access the linked pages as of 7/28/2016. – Kevin Lee Garner Jul 28 '16 at 18:30
Or, `$('#yourInputBoxHere').inputmask({"mask": "99/99/9999", "placeholder": 'MM/DD/YYYY'});` – Anis Apr 05 '17 at 15:21

score 1 · Answer 3 · edited Jul 18 '12 at 12:53

1

You can set the value of the input as a default value like this:

$('#someId').mask("99/99/9999").val("dd/mm/aaaa");

edited Jul 18 '12 at 12:53

bool.dev

17,508
5
69
93

answered Jul 18 '12 at 12:51

Martin

11
1

score 0 · Answer 4 · answered Nov 16 '22 at 06:54

0

I had similar requirement and so i was used like below option and it is help me to format with date. You need to load input mask jQuery file as well.

$("#yourInputBoxidHere").inputmask("datetime",{ inputFormat:"dd/mm/yyyy", placeholder: "DD/MM/YYYY"});

This is working for me well. so it will help you as well.

answered Nov 16 '22 at 06:54

Raviraj

1
3

You are using `.inputmask()` not `.mask()` - is this a different plugin? Can you edit and add a link to the plugin you are using? – Adam Nov 16 '22 at 11:02

score 0 · Answer 5 · answered Jan 17 '12 at 15:02

0

You can specify your own mask to this plugin using the $.mask.definitions and then use it in your code.

answered Jan 17 '12 at 15:02

ShankarSangoli

69,612
13
93
124

I know I can specify my own mask. It's not the mask that is the problem it's the placeholder (I already have a mask which works). What I want is something like $('#foo').mask('99/99/9999', {placeholder: 'dd/mm/yyyy'}). But that uses the whole placeholder string for every character, which is not what I want. – Adam Jan 17 '12 at 15:07

Specify date format in mask when using an input mask?

5 Answers5