jquery DatePicker Done button

Question

Is there any way to handle the event of pressing the "done" button in jquery UI DatePicker?

I have a datepicker that allows only to choose between year and month as in here

The problem is that using the onclose event prevents me from clearing the field (if I click the datepicker pops up then if I close the current selected month and year are put into the field).

I would like not to use an additional "clear" button outside the datepicker, so I though I could use the Done button.

score 9 · Answer 1 · edited Mar 08 '18 at 09:28

9

I found solution on one forum (can't remember where - sorry). I know it's been a while, but for future search :)

Note: The change needs to be done in the plugin. You can simply search for "onClose:" to find it.

onClose: function (dateText, inst) {
    function isDonePressed() {
        return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
    }
    if (isDonePressed()){
        alert('done pressed');
    }
}

edited Mar 08 '18 at 09:28

Arun

378
1
11

answered Apr 24 '15 at 09:23

DrafFter

480
6
17

Here is expression that take into account the _esc_ keystroke: `($('#ui-datepicker-div .ui-datepicker-close.ui-state-hover').length > 0) && !inst._keyEvent` – SergA Jun 25 '19 at 08:58

score 8 · Answer 2 · answered Mar 25 '13 at 17:16

8

As "Done" button calls _hideDatepicker function, you can override it:

jQuery.datepicker._hideDatepicker = function() {
  alert('hello');
};

answered Mar 25 '13 at 17:16

Mikhail Chernykh

2,659
22
15

score 7 · Answer 3 · edited May 23 '17 at 12:16

Here is the perfect solution:

$(function() {
    $('.monthYearPicker').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy'
    }).focus(function() {
        var thisCalendar = $(this);
        $('.ui-datepicker-calendar').detach();
        $('.ui-datepicker-close').click(function() {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            thisCalendar.datepicker('setDate', new Date(year, month, 1));
        });
    });
});

CSS:

.ui-datepicker-calendar {
    display: none;
}

and HTML:

<label for="myDate">Date :</label>
<input name="myDate" class="monthYearPicker">

See how it's working in this jsfiddle.

Source: http://develop-for-fun.blogspot.com/2013/08/jquery-ui-datepicker-month-and-year.html

Courtesy: THIS and THAT SO answers were combined to make this solution.

score 2 · Answer 4 · answered Aug 04 '15 at 05:02

$('#start_date_download').datepicker({
    dateFormat:"yy-mm-dd",
    "autoclose": true,
    showButtonPanel: true,
    closeText: 'Clear' 
}).focus(function() {
    var thisCalendar = $(this);
    $('.ui-datepicker-close').click(function() {
        $.datepicker._clearDate($('#start_date_download'));
    });
});

score 1 · Answer 5 · answered Jul 14 '13 at 18:27

1

Maybe:

$('#myInput')
    .datepicker({
        // datepicker options
    })
    .datepicker('widget')
    .find('.ui-datepicker-close')
    .on('click', function () {
        // done button's handler here
    });

answered Jul 14 '13 at 18:27

cryss

4,130
1
29
34

jquery DatePicker Done button

5 Answers5

Linked