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

Question

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 able 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!

Solution 1

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.

Solution 2

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!

Solution 3

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

Comments

[BalusC]

The data from the database might not have 0's in front, though. Thus.. they're stored as varchar instead of as date?

[tim2011]

My users will be entering a birth date and marriage date. Is there a date picker that will allow them to easily select a year that is far from the current date?

[nnnnnn]

As long as we're talking about what users like make sure you indicate on your page that the format is month-day-year, because Australia, England and most of Europe use day-month-year by default.

[Rajshekar Reddy]

This just adds a placeholder, And entering the value 99/99/9999 is accepted. Can we set some rules to accept proper date format. Eg MM should never exceed 12