Question

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

我设法通过jQuery使用

开始工作

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

在.ui-datepicker课程上。问题是，当用户滚动到下个月时，它不起作用。我还设法通过setTimeout不断清除和重新添加文本来解决这个问题。那真是太烂了，但很有效。

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

实际上可能吗？

Answer 1

在同一页面上的多个日期选择器上显示不同文本的一种解决方案是在每个日期选择器位置的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

Answer 2

您需要创建一个变量来保存datepicker的实例。所以当你创建它时，请执行以下操作：

var myDatePicker = $("#myDatePickerElement").datepicker();
myDatePicker.after("text");

Answer 3

要解决“ hacky” setTimeout的变通办法，可以将click事件处理程序附加到上一个和下一个按钮。这里的代码改编自Martin's answer。

$(function() {
    function appendText(text) {
        $('.ui-datepicker-calendar').after('<span class="middle">'+lastText+'</>');
    }

    function addClickHandlers() {
        $('.ui-datepicker-prev, .ui-datepicker-next')
            .on('click', function() {
                addClickHandlers();
                appendText();
            });
    }

    var lastText;
    $( ".datepicker" ).datepicker()
        .on( "click", function() {
            lastText = $( this ).data('dptxt');
            appendText();
            addClickHandlers();
        });
});

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

3 个答案: