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.

Solution 1

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"});

Solution 2

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.

Solution 3

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

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