jQueryUIDatePicker-在日历下面添加静态文本?

在同一页面上显示多个日期选择器上不同文本的一个解决方案是在每个日期选择器位置的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文本注入到所选的datepicker日历中如下所示:

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

我添加了一些CSS格式,这样您就可以很容易地看到附加的半动态文本在两个日期选择器之间的变化。

jsFiddle 实际解决方案(以下图片来自jsFiddle链接:)

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

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

为了避开你的“恶作剧” 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();
        });
});