JQuery-UI Datepicker() click Done programmitally

Question

Does anybody know how I can trigger the datepicker to fire its onClose() function as if the user made the selection and clicked the Done button?

Maybe I'm looking in the wrong place but I cannot seem to find a way to fire an event that mimics the user selecting the datepicker and clicking on the Done button.

Here's my scenario: I want the date to change when users select an option button. If the user selects the option "YEAR" then #StartDate changes to Jan 2016 and #EndDate changes to Dec 2016. If the user selects the option "MONTH" then #StartDate changes to Jan 2017 and #EndDate changes to Jan 2017.

There are max and min and other requirements handled in the initModule for both datepickers that only get executed when the user selects the datepickers, changes these dates, and clicks on the Done button. I want to fire these events without the user having to manually change the dates.

In my initModule method:

    // ----------------Begin Public Methods----------------------------//
    var initModule = function () {
        var currYear = new Date().getFullYear();

        // Hookup datepickers
        $(#EndDate).datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
            minDate: new Date(2013, 9, 1),
            maxDate: '-1d',
            beforeShow: function () {
                setTimeout(function () {
                    $("#ui-datepicker-div").addClass('calendar-off');
                }, 0);
            },

            onClose: function () {
                var month = $(#ui-datepicker-div .ui-datepicker-month :selected").val();
                var year = $(#ui-datepicker-div .ui-datepicker-year :selected").val();

                $(this).datepicker('setDate' new Date(year, month, 1));
                onChangeEndDate();
            }
        });
        .
        .
        .
        .
        .
    };
    return { initModule: initModule };

So, I've tried $("#EndDate").click('onClose'); and $("#EndDate").trigger('onClose'); and I've poked around everywhere to find an answer to no avail.

How to I get execution into the onClose: function () without the user having to manually change the date in the datepicker and select the Done button?

Wouldn't you just set the date input value to the value you want? And fire the events you want? The DatePicker is just a graphical tool to set the date input value. You shouldn't need to interact with it. — devlin carnate
I need to fire the the onClose function to set min and max values as required. I've already tried to set the values as you suggested but the datepicker fights with me. There must be a way to trigger the datepicker as if the user did it. Isn't there? — Patricia

devlin carnate devlin carnate · Accepted Answer · 2017-01-20T19:06:24

According to the API documentation, the hide() method will close the datepicker.

So, if you want to close the datepicker, you should do

$(#EndDate).datepicker( "hide" );

JQuery-UI Datepicker() click Done programmitally

1 Answers