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?
LVL 1
maqskywalkerAsked:
Who is Participating?
 
Pawan KumarDatabase ExpertCommented:
best is that we format the date in javascript. You can use moment.js or you can use below function

convertDate = function(inputFormat) {
           function pad(s) { return (s < 10) ? '0' + s : s; }
           var d = new Date(inputFormat);
           return [pad(d.getDate()), pad(d.getMonth() + 1), d.getFullYear()].join('/');
       }

Open in new window

0
 
Pawan KumarDatabase ExpertCommented:
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.
0
 
maqskywalkerAuthor Commented:
Pawan,

I tried this,

http://jsfiddle.net/p5kjcvav/

Didn't work.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.

Advertise Here