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.
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');
}
}
($('#ui-datepicker-div .ui-datepicker-close.ui-state-hover').length > 0) && !inst._keyEventAs "Done" button calls _hideDatepicker function, you can override it:
jQuery.datepicker._hideDatepicker = function() {
alert('hello');
};
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.
$('#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'));
});
});
Maybe:
$('#myInput')
.datepicker({
// datepicker options
})
.datepicker('widget')
.find('.ui-datepicker-close')
.on('click', function () {
// done button's handler here
});
