Link to home
Start Free TrialLog in
Avatar of maqskywalker
maqskywalker

asked on

jquery masked input plugin date formatting

I'm using the masked input plugin
http://digitalbush.com/projects/masked-input-plugin/

Example 1

I have this fiddle
http://jsfiddle.net/L8btddb1/

HTML
<input id="date" type="text"></input>

JavaScript
$("#date").mask("99/99/9999");

When I apply the above date format mask on the textbox it works fine.


Example 2

Now I revised example 1 to this. I am basically setting a default value on the texbox.
This is how i need the textbox to be on page load.

http://jsfiddle.net/sh1mtce5/

HTML
<input id="date" type="text" value="11/5/2017"></input>

JavaScript
$("#date").mask("99/99/9999");

The masking is getting set on the textbox but notice how the default value doesn't display on the textbox on page load.

It only works if i set the days to double digits like this:

<input id="date" type="text" value="11/05/2017"></input>

How do I fix example 2,
so regardless whether the textbox value is single digits value="11/5/2017" or double digits value="11/05/2017" it will display on the masked textbox on page load?
Avatar of Pawan Kumar
Pawan Kumar
Flag of India image

replace this

<input id="date" type="text"></input>

with this..

<input id = "date" type="text" value="MM/DD/YYYY" onfocus="this.value = this.value=='MM/DD/YYYY'?'':this.value;" onblur="this.value = this.value=='##/##/####'?'MM/DD/YYYY':this.value;">

and check again.
Avatar of maqskywalker
maqskywalker

ASKER

Pawan,

I tried this,

http://jsfiddle.net/p5kjcvav/

Didn't work.
ASKER CERTIFIED SOLUTION
Avatar of Pawan Kumar
Pawan Kumar
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial