jquery - 如何向 jquery datepicker 弹出日历添加一些文本

Question

我的表单中有 3 个日期选择器字段，在其中一个字段上，我将 minDate 设置为 4。

我想仅在日历弹出窗口下方或旁边添加一些文本，解释为什么用户需要这样做。

我不想改变表单本身的外观(这是“在所有工作已经完成之后”客户请求的更改。)因此，简单地将文本添加到表单中并不是一个选项，因为它会完全破坏间距。

总结一下:我只是想添加几行文本，向用户解释为什么他们无法选择这些日期 - 就在弹出日历上 - 仅适用于该字段。

这可能吗，还是我需要使用其他解决方案？

Answer 1

这是一个替代解决方案，我在此 stackoverflow 线程中详细介绍了该解决方案: jQuery UI datepicker - add static text underneath the calendar?

本质上，您可以使用 jQuery 来识别一个日期选择器，也可以在同一页面上的多个日期选择器上显示不同的文本。该方法是在每个日期选择器位置的 ID/类空间旁边创建数据持有者。然后加载使用(this)选择的日期选择器的数据内容。

示例 jQuery 代码: 然后，将 jQuery 文本注入(inject)到选定的日期选择器日历中将如下所示:

$( ".datepicker" ).datepicker().on( "click", function() {
    var dTxt = $( this ).data('dptxt');
    $('.ui-datepicker-calendar').after('<span class="middle">'+dTxt+'</>');
});

这可以巧妙地将您想要的任何消息插入日历显示的底部。

当然，数据元素包含特定日期选择器的消息，如下所示:

<p>Date1: <input type="text" class="datepicker" 
       data-dptxt="the text1 to display in datepicker" ></p>

请参阅另一个线程以获取有效的 jsFiddle 示例: jQuery UI datepicker - add static text underneath the calendar?