Jquery UI datepicker - enable only array of dates returned from server

Question

I've gone through literally every post on this topic. It's not something new. Yet every time some one comes here with the same problem in different context. Seems like JQUERY UI should support this inherently in its next big release. Ok, now here is my code, where I want to enable only those dates in datepicker returned from a controller to my view, which I input in <input> hidden fields. Here is my html:

<?php foreach ($trip_dates as $single_trip_date) { ?>
<form id="datesetter">
<?php $date = new DateTime($single_trip_date->trip_date); ?>
<input type="hidden" value="<?= $date->format('d-m-Y'); ?>"/>

and this is my code:

$(document).ready(function(){ 
var date_d = [];
$("#datesetter input[type=hidden]").each(function() {
var date_d = new Date();
date_d = [$(this).val()];
console.log(date_d); // Output is: ["12-01-2016"] ["14-01-2016"]

function addZ(n) {
return (n < 10? '0' : '') + n;
}
function available(date) {
dmy = addZ(date.getDate()) + "-" + addZ((date.getMonth()+1)) + "-" + date.getFullYear();
        if ($.inArray(dmy, date_d) == -1) {
            console.log(dmy);
            console.log("php dates: "+date_d); //out put is only first date in series, i.e. 12-01-2016
        return [false, ""];
        }          else {
        return [true,"","Unavailable"];
        }
        }

 $('#datepick').datepicker({
    dateFormat: 'dd/mm//yy',
    beforeShowDay: available
});
    });

});

But when I see output in console.log for available dates in available function, it prints series of first date only repeatedly, there is no sign of another date, which is 14-01-2016.

In result, only 12th date is enabled in datepicker, but all else disabled. I want all the dates in date_d variable to be enabled. can anybody tell me how to do it?

it is easy to add this functionality through a hook to the change event of datepicker. If selected date is NOT one of the available, reset datepikcer to previuous date (or empty) and display a message to pick only from selected dates. Optionaly you can also highlight available dates by tweeking the datepikcer dom — Nikos M.
– Nikos M., Commented Jan 11, 2016 at 10:11
Hi @NikosM. thanks for your commment. Can you please show this with a sample code? — Zafar
– Zafar, Commented Jan 11, 2016 at 10:13

Nikos M. · Accepted Answer · 2016-01-11 21:35:38Z

sth like this should work, if you have problems i can update

update

one more thing, you have different formats in dates returned from php ('d-m-Y') vs dates in datepicker ('dd/mm//yy')

use same, i.e format in datepicker should be 'dd-mm-yy', which is equivalent to php's 'd-m-Y' format

var available_formatted_dates_list = [/*put your formatted date strings  here.. eg "01-01-2016", "01-12-2016"*/];
function check_available_date( date )
{
    var formatted_date = '', ret = [true, "", ""];
    if (date instanceof Date)
    {
        formatted_date = $.datepicker.formatDate( 'dd-mm-yy', date );
    }
    else
    {
        formatted_date = '' + date;
    }
    if ( -1 === available_formatted_dates_list.indexOf(formatted_date) )
    {
        ret[0] = false;
        ret[1] = "date-disabled"; // put yopur custom csc class here for disabled dates
        ret[2] = "Date not available"; // put your custom message here
    }
    return ret;
}

 $('#datepick').datepicker({
    dateFormat: 'dd-mm-yy',
    beforeShowDay: check_available_date
});

jQuery UI datepicker beforeShowDay option

You can use the $.datepicker.formatDate utility function to format the date to match the available dates format and then check if it matches

Instead of creating your own format

Plus you should probably put all available dates from the hidden fields into a single array like the following (do it only once instead of every time):

var available_formatted_dates_list = [];
// fill the available dates list from the hidden fields
$("#datesetter input[type=hidden]").each(function() {
     available_formatted_dates_list.push($(this).val());
});

And then use the filled available_formatted_dates_list array to filter the dates from the datepicker like the first example above.

Artem · Accepted Answer · 2016-01-11 18:03:27Z

1

Your code related to datepicker works, just fixed date adding in array:

date_d.push($(this).val());

answered Jan 11, 2016 at 18:03

Artem

8338 silver badges15 bronze badges

Collectives™ on Stack Overflow

Jquery UI datepicker - enable only array of dates returned from server

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related