jQuery UI datepicker - 在日历下添加静态文本？ [英] jQuery UI datepicker - add static text underneath the calendar?

问题描述

这是在单击链接的输入元素时弹出的。我想能够在即将出现的日期表中插入一些静态文本，即使用户滚动到不同的月份。

This is on the one that pops up when you click the linked input element. I want to be able to insert some static text underneath the table of dates that will appear and stay even if the user scrolls to different months.

我设法得到使用jQuery，使用

I managed to sort of getting working by, with jQuery, using

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

在 .ui-datepicker 类。问题在于，当用户滚动到下个月时，它不起作用。我设法通过不断清除并重新添加文本，使用 setTimeout 来解决这个问题。这真的很奇怪，但是工作。

On the .ui-datepicker class. The problem with that was, it didn't work when the user scrolled to the next month. I managed to fix that as well, by constantly clearing and re-adding the text with setTimeout. That was really hacky, but worked.

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

The next problem came when I had multiple calendars on the page, each with different texts. I tried targeting specific instances on .ui-datepicker with the above method, but I discovered there is actually only one instance of the datepicker that is shared between all calendar fields on the page.

实际上可以吗？

推荐答案

在同一页面上显示多个日期提示者的不同文本是在每个日期戳位置的id / class空间旁创建数据夹。然后加载使用（this）选择的datepicker的数据内容。

One solution for presenting different texts on multiple datepickers on the same page is to create data holders next to the id/class space of each datepicker location. Then load the data content for the datepicker selected using (this).

示例html代码
数据持有者包含具体要显示相关日期戳的文本，如下所示：

Example html code: The data holder contains the specific text to be displayed for the associated datepicker like so:

<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文本注入所选的日期戳记日历将是这样的：

Example jQuery code: Then the jQuery text injection into the selected datepicker calendar would be something like this:

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

我添加了一些CSS格式，以便您可以轻松查看附加的半动态文本更改在两个日期检查员之间。

I've added a little CSS formatting so that you can easily see the additional semi-dynamic text changing between the two datepickers.

查看我的工作 jsFiddle 解决方案（jsFiddle链接中的图片）

See my working jsFiddle solution in action (images below from the jsFiddle link :)

http://web-asylum.com/help-images/datepicker-extra-text-jquery0.jpg
http://web-asylum.com/help- images / datepicker-extra-text-jquery.jpg

这篇关于jQuery UI datepicker - 在日历下添加静态文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！