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,858
    Mentioned
    206 Post(s)
    Tagged
    12 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,858
    Mentioned
    206 Post(s)
    Tagged
    12 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,858
    Mentioned
    206 Post(s)
    Tagged
    12 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
  •