单击链接时显示DatePicker？

Question

I have a link and I would like to show a date picker when I click it:

$('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');
});

I would also like it to auto close when any document element is clicked unless the user chooses a date wherein it will autoclose.

Thanks

Answer 1

You can set up your datepicker instance outside of the click handler. Then when the link is clicked, just call .datepicker('show') on the element where the datepicker was set up.

Here is a simplified example:

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);
}

DEMO