How to change the displayed date format in Datepicker?

Question

I use JQuery UI to input dates and use DatePicker for that.

I need to have date displayed like yyyy-mm-dd.

I tried this solution suggested in this answer in the console: how to change dateformat of jquery Datepicker

$( ".date-input" ).datepicker({ dateFormat: 'yy-dd-mm' });

returned in the console:

[<input class=​"date-input hasDatepicker" name=​"TRAVELDAY_TO" title=​"Enter date you plan to go to your destination" placeholder=​"Go to date" type=​"date" value=​"2014-05-08 00:​00:​00" id=​"dp1399632827005">​, 
<input class=​"date-input hasDatepicker" name=​"TRAVELDAY_FROM" title=​"Enter the date when you plan to come back" placeholder=​"Come back date" type=​"date" value=​"2014-05-13 00:​00:​00" id=​"dp1399632827006">]

But no changes took effect.

So, how to change the displayed date format in Datepicker ?

Later edit:

If I change the type="date" into type="text" (see:http://jsfiddle.net/Zksv5/) the code works, but I want to make it work for the type date format.

So, how to change the displayed date format in Datepicker when input has the type="date" attribute?

Answer 1

What you are doing is the right way to format the datepicker in jQuery UI.

See here: http://jsfiddle.net/abhitalks/w5YQk/

HTML:

<input id="dated" />

jQuery Code:

$("#dated").datepicker({ dateFormat: 'yy-dd-mm' });

Update (based on your comment on HTML5 date type):

1. Without repeating what has already been described here: Is there any way to change input type="date" format?: The short answer is that the wire format in specifications is "yyyy-mm-dd", but the browsers are free to decide on the presentation. Some browsers (like Chrome) present the date as in client machine's regional settings, whereas others (like Opera) present the wire format. So, you can't do much here.

2. The jQuery UI datepicker will fail when the input is HTML5 date type. In fact it will work only when the format is set, and that will convert itself to the wire format of the date type input! So, again you can't do much here.

3. Ideally, you should present a jQuery (or any other) datepicker only if there is no browser support for HTML5 date type. If it is supported, the default browser implementation should be preferred.

So, you have two options here: (a) Use regular text type and attach datepicker to provide common look and feel. (b) Rely on date type and fallback to datepicker only if browser doesn't support HTML5 date type.

You could use any library of your choice to take decisions based on browser feature detection. (e.g. Modernizr etc.)

If you want to do it yourself, then this example will help you (explanation embedded as code comments):

Demo: http://jsfiddle.net/abhitalks/w5YQk/3/

HTML:

<input id="dated" type="text" /> <!-- Regular "text" type input -->
<input id="dated2" type="date" /> <!-- HTML5 "date" type input -->

jQuery Code:

var dtType;

// We know this is text type so attaching datepicker
$("#dated").datepicker({ dateFormat: 'yy-dd-mm' });

// We check the type of the second element
dtType = document.getElementById("dated2").type;

/*
If the browser supports html5 date type, then it will return "date".
If browser doesn't support, it will default to "text" type.
*/

if (dtType == "text") {
    // Attach datepicker only if type is "text"
    $("#dated2").datepicker();
}

This takes advantage of the fact that the browsers which do not support the HTML5 date type will default to text and so the element will be of text type in the DOM.

Hope that helps.

Answer 2

refer this working jsfiddle

<input type="text" value="" class="date-input" id="TxtStrtDate" > 

$(".date-input").datepicker({ 
    dateFormat: 'yy-dd-mm' 
});