12

Here I send movie id and get available days and I want to set it into calendar. but it is not working and it disable all dates. From the PHP it returns date string. Date string is coming correctly but the calendar is not working. Please help.

Date string example 

"28-02-2012","29-02-2012","01-03-2012","02-03-2012","03-03-2012","04-03-2012","05-03-2012","06-03-2012","07-03-2012","08-03-2012","09-03-2012","28-02-2012","29-02-2012","01-03-2012","02-03-2012","03-03-2012","04-03-2012","05-03-2012","06-03-2012","07-03-2012","08-03-2012","09-03-2012"

Code

jQuery.post('index.php', {
  'option': 'com_movie',
  'controller': 'reservation',
  'task': 'datelist',
  'format': 'raw',
  'mid': movieid
}, function(result) {
  var onlydates = result.split(',');
  jQuery("#datepicker").datepicker({
    dateFormat: 'yy-mm-dd',
    showOn: "button",
    buttonImage: "<?php echo IMAGES_LINK.'calendar.png';?>",
    buttonImageOnly: true,
    beforeShowDay: function(date) {
      dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
      console.log(dmy + ' : ' + (jQuery.inArray(dmy, onlydates)));
      if (jQuery.inArray(dmy, onlydates) != -1) {
        return [true, "", "Available"];
      } else {
        return [false, "", "unAvailable"];
      }
    }
  });
  return;
});
Salman A
  • 262,204
  • 82
  • 430
  • 521
Sara
  • 14,098
  • 13
  • 34
  • 50
  • @Sudhir yeah but since I took the beforeShowDay:function() from http://stackoverflow.com/questions/7709320/jquery-ui-datepicker-enable-only-specific-days-in-array I used that format. but before I used Y-m-d but didn't work. – Sara Feb 28 '12 at 11:01
  • what do you get in console.log(dmy+... – Sudhir Bastakoti Feb 28 '12 at 11:07
  • I don't have a idea about it. I took the function from http://stackoverflow.com/questions/7709320/jquery-ui-datepicker-enable-only-specific-days-in-array. When I passed a defined day array it works. – Sara Feb 28 '12 at 11:12

1 Answers1

15
  • Initialize the datapicker only once; tell it to fetch valid dates from a global array
  • Initialize the global array using array literal, update it via AJAX whenever necessary
  • Call the .datepicker("refresh") method whenever disabled/enabled dates change -- i.e. when you get new results through AJAX
  • Your code does not add leading zeros to the dates hence $.inArray won't work as expected
var datelist = []; // initialize empty array

$("#datepicker").datepicker({
    beforeShowDay: function(d) {
        // normalize the date for searching in array
        var dmy = "";
        dmy += ("00" + d.getDate()).slice(-2) + "-";
        dmy += ("00" + (d.getMonth() + 1)).slice(-2) + "-";
        dmy += d.getFullYear();
        return [$.inArray(dmy, datelist) >= 0 ? true : false, ""];
    }
});

$("#button").click(function() {
    datelist = []; // empty the array
    $.post("/echo/html/", {
        // parameters here
    }, function() {
        var result = "28-02-2012,29-02-2012,01-03-2012,02-03-2012,03-03-2012,04-03-2012,05-03-2012,06-03-2012,07-03-2012,08-03-2012,09-03-2012,28-02-2012,29-02-2012,01-03-2012,02-03-2012,03-03-2012,04-03-2012,05-03-2012,06-03-2012,07-03-2012,08-03-2012,09-03-2012"; // dummy result
        datelist = result.split(","); // populate the array
        $("#datepicker").datepicker("refresh"); // tell datepicker that it needs to draw itself again
    });

Demo here

Salman A
  • 262,204
  • 82
  • 430
  • 521
  • Sweet i was pulling my hair out why this was partially working - i was missing the leading zeroes! well spotted :) +1 –  Aug 17 '13 at 23:42