2013-03-25 3 views
9

Есть ли способ обработать событие нажатия кнопки «done» в jQuery UI DatePicker?jQuery DatePicker Done button

У меня есть DatePicker, что позволяет только выбрать год и месяц, как в here

Проблема в том, что с помощью OnClose событие мешает мне очистив поле (если я нажимаю DatePicker выскакивает то, если я закрою текущий выбранный месяц и год помещаются в поле).

Я бы не хотел использовать дополнительную кнопку «clear» за пределами datepicker, поэтому, хотя я мог бы использовать кнопку «Готово».

ответ

8

В "Done" кнопка вызывает функцию _hideDatepicker, вы можете изменить его:

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

Может быть:

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

Вот идеальное решение:

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

и HTML:

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

Посмотрите, как это работает в этом jsfiddle.

Источник:http://develop-for-fun.blogspot.com/2013/08/jquery-ui-datepicker-month-and-year.html

Предоставлено:THIS и THAT SO ответы были объединены, чтобы сделать это решение.

5

Я нашел решение на одном форуме (не могу вспомнить, где - извините). Я знаю, что это было какое-то время, но для будущего поиска :)

Примечание: изменение должно быть выполнено в плагине. Вы можете просто найти «onClose:», чтобы найти его.

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