jquery - jquery DatePicker 完了ボタン

Question

jquery UI DatePickerで「完了」ボタンを押すイベントを処理する方法はありますか?

ここのように、年と月の間でのみ選択できる日付ピッカーがあります

問題は、onclose イベントを使用するとフィールドをクリアできないことです (datepicker をクリックするとポップアップが表示され、現在選択されている月と年を閉じるとフィールドに入力されます)。

日付ピッカーの外で追加の「クリア」ボタンを使用したくないので、「完了」ボタンを使用できます。

Answer 1

「完了」ボタンは _hideDatepicker 関数を呼び出すため、オーバーライドできます。

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

Answer 2

あるフォーラムで解決策を見つけました (場所を思い出せません - 申し訳ありません)。しばらく経っていることは知っていますが、将来の検索のために:)

注: 変更はプラグインで行う必要があります。「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');
    }
}

Answer 3

これが完璧な解決策です：

$(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 の回答を組み合わせて、このソリューションを作成しました。

Answer 4

多分：

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