Datepicker UI format change in JQuery,

Question

I have the following code for the datepicker UI in JQuery,

$(document).on('ready',function(){
    $('#date').datepicker();
    $('#date').datepicker('setDate', 'today');
    var dateValue = $("#date").val();      
    document.getElementById("#box_title").innerHTML= "today is: "+dateValue+" ";
});

this jQuery code displays date in mm/dd/yy format in the 'box_title' div, e.g. 01/02/2015.

I have realized that different parts of the world uses different format such as dd/mm/yy, so 01/02/2015 may raise a confusion.

Is there anyway to provide a setting so that it actually displays 02-Jan-2015, dd-MM-yy format using datepicker API?

basically I would like to leave the format as the original in #date div but just wanna change the format in the #box_title div for the sake of easier interpretation.

appreciate of your help,

[UPDATE]

specifically, when I create an object like this,

var myDate = $('#date').datepicker('setDate', 'today);

myDate is a date object in the format 'mm/dd/yy'.

What I want to do is to make a copy of this object and change the format of the copied object to dd-M-yy and I just can't figure out how...

[UPDATE 2]

ok.. I tried the following, thinking $.datepicker.formatDate is the key to my answer but no luck so far.. console just outputsUncaught TypeError: undefined is not a function..

$('#date').datepicker();
var x = $('#date').datepicker('setDate', 'today'); // original object which I wanna keep

var dateValue = $("#date").val(); 
var x2 = $.datepicker.formatDate('D, dd M yy', dateValue); // copied object with new format

console.log(x2);

Um.. ok I thought I knew what I was doing but while Im writing this just realized that this code doesn't look right although I don't know what is not right. been starring at my sublime editor for hours..

score 0 · Answer 1 · answered Jan 01 '15 at 20:57

0

There you go, from the official documentation: http://api.jqueryui.com/datepicker/#utility-formatDate

answered Jan 01 '15 at 20:57

ounos

126
4

score 0 · Accepted Answer · answered Jan 02 '15 at 02:57

I found what the problem with my code is, finally.

When using $.datepicker.formatDate(format, date) , the 'date' has to be a date object and I was merely passing a string. So the correct way is,

$('#date').datepicker();
var x = $('#date').datepicker('setDate', 'today'); // original object which I wanna keep

var dateValue = $("#date").val(); 
var x2 = $.datepicker.formatDate('D, dd M yy', new date(dateValue)); // copied object with new format

console.log(x2);

And now I'm getting,

Fri, 02 Jan 2015

as an output which I can use.

Hope this helps for those who are facing similar difficulties.

Datepicker UI format change in JQuery,

2 Answers2