在 jQuery UI datepicker 中仅选择特定日期(日期列表来自 AJAX) [英] Select only specific dates in jQuery UI datepicker (date list comes from AJAX)

问题描述

在这里我发送电影 ID 并获取可用天数，我想将其设置到日历中.但它不起作用并且它禁用了所有日期.从 PHP 它返回日期字符串.日期字符串正确出现，但日历不起作用.请帮忙.

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.

日期字符串示例

"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"

代码

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;
});

推荐答案

• 只初始化数据选择器一次；告诉它从全局数组中获取有效日期
• 使用数组字面量初始化全局数组，必要时通过 AJAX 更新它
• 每当禁用/启用日期更改时调用 .datepicker("refresh") 方法——即当您通过 AJAX 获得新结果时
• 您的代码没有向日期添加前导零，因此 $.inArray 无法按预期工作
• 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
    });

此处演示

这篇关于在 jQuery UI datepicker 中仅选择特定日期(日期列表来自 AJAX)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！