在 jQuery UI datepicker 中仅选择特定日期（日期列表来自 AJAX）

Posted 2023-05-08

【中文标题】在 jQuery UI datepicker 中仅选择特定日期（日期列表来自 AJAX）

【英文标题】：Select only specific dates in jQuery UI datepicker (date list comes from AJAX)

【发布时间】：2012-03-17 20:12:27

【问题描述】：

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

日期字符串示例

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

【问题讨论】：

@Sudhir 是的，但是因为我从***.com/questions/7709320/… 获取了 beforeShowDay:function()，所以我使用了这种格式。但在我使用 Y-m-d 但没有工作之前。

你在 console.log(dmy+...

中得到了什么

我对此一无所知。我从***.com/questions/7709320/… 获取了函数。当我通过定义的日期数组时，它可以工作。

【参考方案1】：

只初始化一次数据选择器；告诉它从全局数组中获取有效日期 使用数组字面量初始化全局数组，必要时通过 AJAX 更新它 在禁用/启用日期发生变化时调用 .datepicker("refresh") 方法，即当您通过 AJAX 获得新结果时 您的代码未在日期前添加前导零，因此 $.inArray 无法按预期工作

---

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

【讨论】：

甜我把头发拉出来了，为什么这部分工作 - 我错过了前导零！很好发现:) +1