SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery DatePicker - Unavailable dates from database

    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.


    Code:
    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi,

    What does data contain in the success callback?

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

    Code JavaScript:
    success: function(data){
      console.log(data)
    }

  3. #3
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    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?

    Code JavaScript:
    success: function(data){
      unavailableDates = data;
    }

  5. #5
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code JavaScript:
    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.

    Code JavaScript:
    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.
    Code JavaScript:
            success: function(data)          
            {
               unavailableDates = data;
            }

  6. #6
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi,

    Could you post a link to your page?

  8. #8
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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' ?
    Code JavaScript:
    $('#datepicker').focus(function(){
            //alert($('#name').html());
             $.ajax({                                      
            url: 'getDates.php',                           
            data: "artist_id="+$('#name').html(),                        
            dataType: 'json',                     
            success: function(data)          
            {
               alert(data)
            }
            });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •