Cara Menambahkan Tombol Reset di jQuery UI Datepicker

Plugin jQuery UI Datepicker adalah cara termudah untuk menambahkan datepicker ke dalam input menggunakan jQuery. Ini akan menyediakan dialog datepicker untuk memilih tanggal dari tampilan kalender. Saat kolom input teks digunakan untuk melampirkan datepicker, pengguna dapat menghapus nilai yang dipilih di kolom input. Namun, jika elemen HTML yang tidak dapat diedit atau inputan yang menggunakan readonly, nilai datepicker yang dipilih tidak mungkin dihapus secara manual.

Dalam kode contoh ini, kami akan menunjukkan kepada Anda cara menghapus/mereset ulang nilai dalam inputan datepicker menggunakan jQuery, kita akan menambahkan satu tombol Hapus ke dialog datepicker yang memungkinkan pengaturan ulang nilai yang dipilih di jQuery UI Datepicker.

Elemen HTML untuk melampirkan datepicker ke input teks.

<input type="text" id="datepicker" readonly="readonly" />

Gunakan event onClose dari objek datepicker() untuk menambahkan tombol Reset ke popup datepicker menggunakan jQuery.

$(function(){
    $("#datepicker").datepicker({
      showOn: 'focus',
      showButtonPanel: true,
      closeText: 'Reset', // text yang akan tampil untuk button "close"
      onClose: function () {
          var event = arguments.callee.caller.caller.arguments[0];
          // Jika "Reset" diklik, hapus nilai yang dipilih
          if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {
              $(this).val('');
          }
      }
    });
});