单击链接时显示DatePicker？

Question

我有一个链接，当我单击它时想显示一个日期选择器：

$('body').on("click", ".date-link", function (e) {
    /*
    $("#daterange").dialog("option", "position",
           {
               my: "left top",
               at: "left bottom",
               of: e,
           });

    $("#daterange").dialog('open');
    */

    $(e).datepicker({
        beforeShowDay: $.datepicker.noWeekends,
        onSelect: function (dateText) {
            changeCalendarDate(dateText);
        },
        onClose: function (dateText) {
        }
    });

    $("#filter").dialog('close');
});

我还希望单击任何文档元素时自动关闭，除非用户选择自动关闭的日期。

谢谢

Answer 1

您可以在点击处理程序之外设置datepicker实例。 然后，当单击链接时，只需在设置日期选择器的元素上调用.datepicker('show') 。

这是一个简化的示例：

的HTML

<input id="date" />
<a href="#" class="date-link">Date Link</a>

JS

$("#date").datepicker({
    beforeShowDay: $.datepicker.noWeekends,
    onSelect: function (dateText) {
        changeCalendarDate(dateText);
    }
});

$('.date-link').on('click', function(e) {
    // Do not follow link
    e.preventDefault();
    // Show the datepicker
    $('#date').datepicker('show');
});

function changeCalendarDate(dateText) {
    // Process date
    console.log(dateText);
}

演示