这是在单击链接的输入元素时弹出的那个.我希望能够在日期表下面插入一些静态文本,即使用户滚动到不同月份也会保留.
我设法通过jQuery使用来完成工作
$('.ui-datepicker').after('text');
在.ui-datepicker类上.问题是,当用户滚动到下个月时,它不起作用.通过不断清除和重新添加带有setTimeout的文本,我设法解决了这个问题.这真的很酷,但很有效.
当我在页面上有多个日历时,下一个问题出现了,每个日历都有不同的文本.我尝试使用上述方法在.ui-datepicker上定位特定实例,但我发现实际上只有一个datepicker实例在页面上的所有日历字段之间共享.
它实际上可能吗？
解决方法
用于在同一页面上的多个日期选择器上呈现不同文本的一种解决方案是在每个日期选择器位置的id /类空间旁边创建数据持有者.然后加载使用(this)选择的datepicker的数据内容.
示例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文本注入选定的datepicker日历将是这样的：
$( ".datepicker" ).datepicker()
.on( "click",function() {
var dTxt = $( this ).data('dptxt');
$('.ui-datepicker-calendar').after('<span class="middle">'+dTxt+'</>');
});
我添加了一些CSS格式,以便您可以轻松地看到两个日期选择器之间的其他半动态文本.
看看我正在运行的jsFiddle解决方案(下面的图片来自jsFiddle链接:)
http://web-asylum.com/help-images/datepicker-extra-text-jquery0.jpg
http://web-asylum.com/help-images/datepicker-extra-text-jquery.jpg
