Calendar Pickerにリセットボタンを実装する方法

日付入力フォームでカレンダーを表示させて、
日付を選択できると、とても直感的に日付を入力できます。

デモ

[codepen_embed height=500 theme_id=1 slug_hash=’amKEYj’ user=’sume44′ default_tab=’result’ animations=’run’]
[/codepen_embed]

実装方法

下記コードの4行目以降をコピペすれば、
カレンダー下部に削除ボタンが表示されるかと思います。

$('.calendar').datepicker({
  //...
});

(function(){
  var old_fn = $.datepicker._updateDatepicker;
  $.datepicker._updateDatepicker = function(inst) {
    old_fn.call(this, inst);
    var buttonPane = $(this).datepicker("widget").find(".ui-datepicker-buttonpane");
    var buttonHtml = "<button type='button' class='ui-datepicker-clean ui-state-default ui-priority-primary ui-corner-all'>削除</button>";
    $(buttonHtml).appendTo(buttonPane).click(
      function(ev) {
        $.datepicker._clearDate(inst.input);
    });
  }
})();

ただし、datePickerのshowButtonPanelオプションを
有効にしている必要があります。

$('.calendar').datepicker({
  //...
  showButtonPanel: true,
  //...
});

引用

• JQuery datePicker date reset