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

【问题标题】：How to add some text to jquery datepicker popup calendar如何向 jquery datepicker 弹出日历添加一些文本
【发布时间】：2014-06-21 17:40:32
【问题描述】：

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

我想仅在该日历弹出窗口下方或旁边添加一些文本，解释为什么这对用户来说是必要的。

我不希望更改表单本身的外观（这是“在所有工作已经完成之后”客户要求的更改。）因此，简单地将文本添加到表单不是一种选择，因为它会完全破坏间距。

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

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

【问题讨论】：

标签： jquery datepicker

【解决方案1】：

这是我在此 stackoverflow 线程中详细介绍的替代解决方案： jQuery UI datepicker - add static text underneath the calendar?

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

示例 jQuery 代码： 然后将 jQuery 文本注入到选定的日期选择器日历中将是这样的：

$( ".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?

【讨论】：

这可行，但是当用户更改月份时附加的内容会消失。

【解决方案2】：

您可以使用beforeShow 函数附加一些包含注释的 div，例如：

$(".some_element").datepicker({
    ....
    beforeshow: function(inp, inst) {
        //call the function to append div to datepicker
        appendNoteDiv();
    }
});

function appendNoteDiv() {
    var parElem = $("#ui-datepicker-div");
    //check if your div exists, append if not
    if( !parElem.find(".note_div").length ) {
        parElem.append("<div class='note_div'>Your Content here</div>");
    }
}

【讨论】：

谢谢你，苏迪尔。我试试看！