Change datepicker date format in beforeShowDay function

Question

I am using the beforeShowDay function to highlight days that match a MySQL query of 'used' dates.

My datepicker set-up looks like this:

dp = jQuery( "#datepicker" ).datepicker(
                                { 
                                    minDate: +1, 
    maxDate: "+1M",
    dateFormat: 'yyyy-mm-dd',
    beforeShowDay: function(date) {
                                                          q = q_dates[date];
                                                    }
                                                }
                                                );

The problem is that the value of DATE looks like this: Mon May 27 2013 00:00:00 GMT+0700 (SE Asia Standard Time)

I've tried setting the dateFormat. Also tried date.toString('yyyy-mm-dd') thinking it would work like a Javascript date object.

How can I convert DATE to the format yyyy-mm-dd?

score 2 · Accepted Answer · edited May 23 '17 at 11:59

2

How about using Date.js plugin. Check out their documentation.

Also try using below code:

date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate() ;

EDIT:

for 2 digit Date and month, I would suggest to have a look at this SO question.

var date = new Date("Mon May 27 2013 00:00:00 GMT+0700 (SE Asia Standard Time)");

alert(date.getFullYear() + "-" + ("0" + (date.getMonth() + 1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2) );

edited May 23 '17 at 11:59

Community

1
1

answered Jun 20 '13 at 05:18

Praveen

55,303
33
133
164

Thanks for the suggestions. I saw the second one somewhere. But the month and date has to be in 2 digit formats, and I don't know of a quick and clean way to make that happen. And adding another plugin seems like overkill just to reformat the date in one place. I am really surprised there is not a simple formatting command that can be called to do this. – Lee Loftiss Jun 20 '13 at 05:34
Thanks. I was just about to comment that I found a similar solution here: http://stackoverflow.com/questions/3605214/javascript-add-leading-zeroes-to-date – Lee Loftiss Jun 20 '13 at 05:42
1

@Lee Usually it happen, when we search we won't be able to find the exact link. After posting question, we will find the exact link for the answer :) – Praveen Jun 20 '13 at 05:48
Yes, very true. It is almost embarrassing sometimes. – Lee Loftiss Jun 20 '13 at 06:02

Grogu · Answer 2 · 2021-01-07T22:34:43.693

No need for any extra plugin. Use the built-in jqueryui formatDate();

For all the different formats look here in their docs

For the sake of quality I'll post all date formats here

Datepicker date formats

"mm/dd/yy"
"yy-mm-dd"
"d M, y"
"d MM, y"
"DD, d MM, yy"
"'day' d 'of' MM 'in the year' yy"

jqueryui

//return today's date
$.datepicker.formatDate("yy-mm-dd", $('#datepicker').datepicker("getDate"));

//alternatively you can use this syntax
jQuery.datepicker.formatDate('yy-mm-dd', 'getDate');

Datepicker

$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
beforeShowDay : function (date){

//format date
var jquerydate = $.datepicker.formatDate("yy-mm-dd", date);

//alternative syntax
var jquerydate = jQuery.datepicker.formatDate('yy-mm-dd', date);

}

});

Change datepicker date format in beforeShowDay function

2 Answers2