javascript - 单击链接时显示 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('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);
}

演示