jQuery UI の datepicker、キー入力と併用

4542 ワード
jQuery UI DatePicker UI テキストリンク

jQuery UI の datepickerで、キー入力による入力可能にする

ステップ１、Hidden項目を追加する

<!-- 日付テキスト項目 -->
<input type="text" id="datepickerDisplay" />
<!-- Hidden項目　-->
<input type="hidden" id="datepickerDisplayHidden" />

ステップ２、onSelectを以下のように改修。

/**********************************************************************************
 * datePicker設定
 **********************************************************************************/
$('#datepickerDisplay').datepicker({
    // 日付選択イベント
    onSelect: function(date) {
        var momentDate = moment($('#datepickerDisplay').val());
        // 入力した日付が有効ではない場合
        if (!momentDate.isValid()) {
            return;
        }
        var datepickerVal = momentDate.format("YYYY/MM/DD");
        var datepickerValBK = $('#datepickerDisplayHidden').val();
        // Hidden項目で保持した日付と一致しない場合
        if (new Date(datepickerVal).getTime() != new Date(datepickerValBK).getTime()) {
            date = datepickerVal;
            $('#datepickerDisplay').val(datepickerVal);
        }
        // HIDDEN項目に日付を保持
        $('#datepickerDisplayHidden').val(date);
    }
});
502 bad gateway
Linuxソフトウェアマネージャ