jQuery DatePicker - Unavailable dates from database

JavaScript
1

Hello, I’m trying to retrieve dates from the database based on a selection. If a user selects singer A for example, then I’m going through the database and get the unavailable dates of singer A.

var unavailableDates;

function unavailable(date) {
    dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
    if ($.inArray(dmy, unavailableDates) == -1) {
        return [true, ""];
    } else {
        return [false, "", "Unavailable"];
    }
}

$(document).ready(function()
{
    $("#datepicker").datepicker({
        dateFormat: 'yy-mm-dd',
        beforeShowDay: unavailable,
        minDate: 0,
        firstDay: 1, // rows starts on Monday
        changeMonth: true,
        changeYear: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        altField: '#date_due',
        altFormat: 'yy-mm-dd'
        });

    $('#datepicker').focus(function(){
        //alert($('#name').html());
         $.ajax({
        url: 'getDates.php',
        data: "artist_id="+$('#name').html(),
        dataType: 'json',
        success: function(data)
        {
           alert(data)
        }
        });
    })

});

Everything works fine. I used the “getDates.php” to retrieve the dates and pass them through the function. But how can I pass the “data” (within “success: function()”) to the unavailable dates above? I get the dates from database but I don’t know how to link them with the array “unavailableDates” (line 1) in order to show unavailable dates in datePicker.

2

Hi,

What does data contain in the success callback?

Also, instead of using alert to display it, you should log it to the console:

success: function(data){
  console.log(data)
}
3

Dear pullo,

Data contains different dates. For example:
[21-8-2013,28-08-2013,13-09-2013]

But i dont know how to pass the returned dates to the unavailableDates array (line 1)

4

Hi,

This seems to be more of a JS question, so I’ve moved the thread to the JS forum.

As for your question, why can’t you just assign the return value of the success callback to the unavailableDates variable?

success: function(data){
  unavailableDates = data;
}
5

I’ve already tried that but for some reason it doesn’t show the unavailable dates in the datepicker.

the function unavailable get the unavailableDates and make them black and unclickable.

function unavailable(date) {
    dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
    if ($.inArray(dmy, unavailableDates) == -1) {
        return [true, ""];
    } else {
        return [false, "", "Unavailable"];
    }
}

Then the datepicker use the unavailable function (see beforeShowday: unavailable) in order to know what dates are unavailable and make them unclickable.

f$(document).ready(function()
{
    $("#datepicker").datepicker({
        dateFormat: 'yy-mm-dd',
        beforeShowDay: unavailable,
        minDate: 0,
        firstDay: 1, // rows starts on Monday
        changeMonth: true,
        changeYear: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        altField: '#date_due',
        altFormat: 'yy-mm-dd'
        });

I tried to assign data to unavailableDates variable but it doesn’t work. The datepicker shows all dates no matter if they are unavailable or not.


        success: function(data)
        {
           unavailableDates = data;
        }
6

Hello again,
I found out what was the problem… the date format was different. It needed to be dd-mm-yyyy and not yyyy–mm–dd.
Now it shows the unavailable dates with one small problem left though. When I first click on the datepicker it shows all dates (even unavailable). When I click again THEN it shows the unavailable dates and make them black and unclickable. Does anyone know why?

Thank’s a lot for your quick help Pullo and sorry for the double post.

7

Hi,

Could you post a link to your page?

8

it’s not online yet but I can show you step by step with printscreens:
http://imageshack.us/a/img13/8029/vbz7.png

Maybe the problem is the ‘.focus’ ?


$('#datepicker').focus(function(){
        //alert($('#name').html());
         $.ajax({                                      
        url: 'getDates.php',                           
        data: "artist_id="+$('#name').html(),                        
        dataType: 'json',                     
        success: function(data)          
        {
           alert(data)
        }
        });