jquery masked input plugin date formatting

maqskywalker
maqskywalker used Ask the Experts™
on
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?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Pawan KumarDatabase Expert
Awarded 2016
Top Expert 2016

Commented:
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.

Author

Commented:
Pawan,

I tried this,

http://jsfiddle.net/p5kjcvav/

Didn't work.
Database Expert
Awarded 2016
Top Expert 2016
Commented:
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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial