jQuery masked input - format date as m/d/yyyy or m/dd/yyyy or mm/dd/yyyy or mm/d/yyyy

I want to use the jQuery masked input plugin found here http://digitalbush.com/projects/masked-input-plugin/ to format the date.

I am pulling data from a database to populate the date field when the page loads. The user will then be able to change the date if it is incorrect.

I want people to be a开发者_运维问答ble to enter just one number for the month and day instead of having to enter a 0 before a single-digit number. I want them to be able to type 6/13/2010 instead of 06/13/2010. The data from the database might not have 0's in front, though.

I know that anything listed after a ? is optional, but I want characters at the beginning or middle to be optional.

Thanks!

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 that is based on the one you mentioned. 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 haven't tried it with single digits for dates, but if I were to do it, I'd just change the above expression to this:

$('#yourInputBoxHere').mask("9/9/9999", {placeholder: 'M/D/YYYY' });

I hope this helps.

The short answer is: It's not possible without tweaking the plugin.

But, your users will thank you a lot if you use the jquery ui datepicker.

It's usage is as simple as:

$("#texbox1").datepicker();

It will show a nice calendar when the inputbox recieves focus.

Hope this helps. Cheers

I am not sure if this addresses your problem but I found this on https://github.com/RobinHerbots/jquery.inputmask:

$('#yourInputBoxHere').datepicker().inputmask("date", { placeholder: "mm/dd/yyyy", yearrange: { minyear: 1700 } });

This will fill in a '0' at the month beginning if you start with a number greater than '1' and for the day if the number is greater than 3, '0' is automatically placed in front.

The yearrange can also specify maxyear, if you need that criteria.

You can leave out the .datepicker() if you don't want the jquery calendar.

Hope this helps!