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

Question

我在一个表单中有3个datepicker字段，在其中一个字段上，我将minDate设置为4。

我想添加一些文本（在日历弹出项下或旁边），解释为什么这对用户是必要的。

我不希望改变表单本身的外观（这是一个‘在所有工作已经完成之后’客户请求的更改。）所以简单地将文本添加到表单中是不可行的，因为它会完全破坏间距。

总结一下：我只是想添加几行文字，向用户解释为什么他们不能在弹出的日历上只为该字段选择这些日期。

Answer 1

这是一个替代解决方案，我将在本stackoverflow线程中详细介绍：jQuery UI datepicker-在日历下面添加静态文本？

本质上，您可以使用jQuery只标识一个datepicker，也可以在同一页面上的多个datepicker上显示不同的文本。方法是在每个datepicker位置的ID/Class空间旁边创建数据持有者。然后加载使用（this）选择的datepicker的数据内容。

jQuery代码示例：那么jQuery文本注入到选定的datepicker日历中的情况如下所示：

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

这将在日历显示的底部整齐地插入任何您想要的消息。

当然,数据元素包含特定datepicker的消息,如下所示：

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

请参阅另一个线程以获得工作的jsFiddle示例：jQuery UI datepicker-在日历下面添加静态文本？