jQuery UI Datepicker - 如何动态禁用特定日期

Posted 2023-05-08

【中文标题】jQuery UI Datepicker - 如何动态禁用特定日期

【英文标题】：jQuery UI Datepicker - How to dynamically disable specific dates

【发布时间】：2020-12-25 10:22:40

【问题描述】：

我在我的一个项目中使用 jQuery UI Datepicker 小部件。 我想在 datepicker 日历中禁用一组特定日期，但我想在 ajax 调用后完成，而不是在页面加载时完成。

我与datepicker相关的html元素是：

<input type="text" id="inpIdForDate" class="form-control" placeholder="Choose for date" />

将 datepicker 小部件加载到 html 元素的 jQuery 代码是：

$("#inpIdForDate").datepicker(
        dateFormat: "yy-mm-dd",
        firstDay: 1
    );

现在，我想启动一个 ajax 调用来检索要在 datepicker 日历中禁用的日期数组。

$.ajax(
        method: "get",
        url: "../api/...",
        success: function (arrayOfDatesToBeDisabled) 
            $("#inpIdForDate").datepicker(
                beforeShowDay: function (date) 
                    var string = $.datepicker.formatDate('yy-mm-dd', date);
                    return [arrayOfDatesToBeDisabled.indexOf(string) == -1]
                
            );
        
    );

上面的代码没有给出任何错误，但它没有禁用 arrayOfDatesToBeDisabled 中的日期。 有什么建议可以解决这个问题吗？

【参考方案1】：

你确定转换后的字符串和arrayOfDatesToBeDisabled中的字符串类型相同吗？因为 Jquery datepicker 中的 'yy-mm-dd' 表示 'yyyy-mm-dd'。

【讨论】：

我确定。 arrayOfDatesToBeDisabled 中的字符串格式为 'yyyy-mm-dd'，例如：[ '2020-09-01', '2020-09-03', '2020-09-10' ]。

似乎 beforeShowDay 仅在您第一次初始化时才有效。因此在初始化 datepicker 之前使用 await 等待 ajax 输出。或将所有初始化日期选择器放入 ajax 的响应中。

@Viet 使用异步函数并等待等待 ajax 输出不起作用，但在 ajax 的成功方法中初始化 datepicker 就可以了。

理论上，如果async-await工作正常，使用async-await相当于在ajax的响应中执行函数。如果 async-await 没有按预期工作，请打开另一个帖子：D

【参考方案2】：

您可以等待回复：

async function datesToDisable()
   let dates = await $.ajax(method: "get", url: "../api/...");
   return dates


$(function()
    $('something').datepicker(
         beforeShowDay: datesToDisable
     );
)

【讨论】：

什么是异步函数 datesToDisable() 中的“res”？

@szti1516 对不起，我的意思是dates