jQuery UI datepicker - 在日历下方添加静态文本？

Question

这是当您单击链接的输入元素时弹出的一个。我希望能够在日期表下方插入一些静态文本，即使用户滚动到不同月份，这些文本也会显示并保留。

我设法通过 jQuery 开始工作

$('.ui-datepicker').after('text');

在.ui-datepicker类上。问题是，当用户滚动到下个月时，它不起作用。我也通过使用 setTimeout 不断清除和重新添加文本来解决这个问题。这确实很hacky，但是很有效。

当我的页面上有多个日历，每个日历都有不同的文本时，下一个问题就出现了。我尝试使用上述方法定位 .ui-datepicker 上的特定实例，但我发现实际上只有一个日期选择器实例在页面上的所有日历字段之间共享。

那么这真的可能吗？

Answer 1

在同一页面上的多个日期选择器上呈现不同文本的一种解决方案是在每个日期选择器位置的 ID/类空间旁边创建数据持有者。然后加载使用(this)选择的日期选择器的数据内容。

html 代码示例:数据持有者包含要为关联的日期选择器显示的特定文本，如下所示:

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

<p>Date2: <input type="text" class="datepicker" 
           data-dptxt="the Second text to display" ></p>

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

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

我添加了一些 CSS 格式，以便您可以轻松地看到两个日期选择器之间附加的半动态文本的变化。

查看我的工作 jsFiddle 实际解决方案(下面的图片来自 jsFiddle 链接:)

_{(来源:web-asylum.com)}