JQueryUI Datepicker - 将事件添加到禁用日期

Posted 2023-05-08

【中文标题】JQueryUI Datepicker - 将事件添加到禁用日期

【英文标题】：JQueryUI Datepicker - Adding Event to Disabled Date

【发布时间】：2019-06-16 05:51:08

【问题描述】：

我有一个 JQueryUI 日期选择器，有些日子使用 beforeShowDay 参数禁用。我知道您可以使用该参数添加工具提示，但我需要触发显示“此日期可能未选择”的消息。

这甚至可能吗？我已经尝试过 onSelect 参数，但只有在选择启用日期时才会触发。我也尝试过给禁用日期一个类，然后为具有该类的项目添加一个点击事件，但它似乎也不起作用。

function unavailable(date) 
    var dmy = date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
    if ($.inArray(dmy, formattedDates) == -1) 
        return [true, ""];
     else 
        return [false, '', 'Unavailable'];
    

$('#' + className).datepicker(
    controlType: 'select',
    minDate: minDate,
    maxDate: maxDate,
    defaultDate: maxDate,
    dateFormat: 'dd M yy',
    setDate: maxDate,
    beforeShowDay: unavailable
);

【参考方案1】：

如果您需要触发自定义tool-tip，请抛出带有消息或任何想法的alert：

根据文档，第二个参数是一个 CSS 类：

[1]: 添加到日期单元格的 CSS 类名或默认为 "" 演示文稿https://api.jqueryui.com/datepicker/#option-beforeShowDay

所以.. 为禁用日添加一个名为“custom-tool-tip”或其他什么的类并设置一个事件监听器。

$('body').on('click', '.custom-tool-tip', function(e)  // or whatever event(s) you want to listen to
    alert('This date may not be selected.');
);

【讨论】：

太好了，谢谢！这行得通。我试图将点击事件直接添加到具有自定义类的项目中，即 $('.disabledDate').on('click', function .... ) 但它不起作用，我相信因为没有页面加载时具有该类的元素。但我猜在执行 $('body').on('click', CLASSNAME 等时，它会先发制人地将点击事件添加到具有该类名的 的任何子级？

您好，它解决了您的问题。如果您认为这对您有所帮助，请将其标记为正确答案。这样其他有类似问题的人也可以从中受益。而且，是的..这就是它的作用 - 这样你就可以添加例如动态添加元素的事件监听器。虽然没有必要使用body.. 您可以将其缩小到最近的父元素 - 这样它可能会更有效.. 并且可以定位。