Question

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

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

我不希望改变表单本身的外观（这是'毕竟工作已经完成'客户请求更改。）因此，简单地将文本添加到表单不是一个选项，因为它将彻底破坏间距。

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

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

Answer 1

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

基本上，您可以使用jQuery来识别一个日期选择器，或者您可以在同一页面上的多个日期选择器上显示不同的文本。该方法是在每个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+'</>');
});

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

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

<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?

Answer 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>");
    }
}

如何将一些文本添加到jquery datepicker弹出日历

2 个答案: