August 2, 2017

Membuat Range Datepicker Bootstrap

Share this
  • 12
  •  
  •  
  •  
  •  
  •  
    12
    Shares

Assalamualaikum wr wb, setelah tulisan saya sebelumnya mengenai cara memasang bootstrap datepicker, tema kali ini masih berkaitan dengan hal tersebut, yaitu bagaimana cara membuat range datepicker bootstrap. Range datepicker merupakan sebuah form inputan tanggal yang terdiri dari dua macam tanggal, tanggal awal dan akhir. Range datepicker dibutuhkan misalnya ketika kita akan membuatĀ tanggal berangkat dan tanggal pulang pada sebuah proses keberangkatan. Dalam hal ini, tidak mungkin tanggal berangkat nilainya lebih besar dari tanggal pulang.

Kita tidak perlu repot membuat javascript untuk validasi proses ini. Bootstrap datepicker memiliki option yang bisa kita gunakan, yaitu start date. Pada kasus ini kita bisa membuat setting start date pada tanggal pulang dengan nilai yang lebih besar daripada nilai pada tanggal berangkat. Bootstrap datepicker secara otomatis mendisable tanggal yang lebih kecil dari tanggal berangkat pada tanggal pulang.

Membuat Range Datepicker Bootstrap

Bootstrap datepicker yang saya gunakan adalah versi 1.6.4. Pertama-tama buat terlebih dahulu form yang akan kita gunakan. Saya membuat dua input form yaitu tanggal awal dan tanggal akhir. Jangan lupa tambahkan id pada masing masing form inputan sebagai identifikasi pada javascriptnya nanti.

Setelah kedua form di atas di buat, tambahkan javascript berikut untuk memvalidasi tanggal awal dan tanggal akhir.

Seperti kita lihat pada potongan javascript di atas, untuk variabel startdate nilai diambil dari tgl_mulai. Kemudian saya buat kondisi jika tgl mulai nilainya lebih besar daripada tgl akhir. Maka nilai dari tanggal akhir akan otomatis di setting menjadi tanggal awal. Untuk Lebih jelasnya akan saya tampilan screenshoot untuk pengujian form ini.

Seperti pada demo di atas, tanggal pada tgl akhir yang nilainya lebih kecil dari tanggal awal akan otomatis terdisable. Jika kurang jelas, anda bisa lihat script lengkapnya disiniĀ http://mragus.com/source-code/. Semoga artikel ini bisa bermanfaat. Terimakasih.

Agus Wiji Suhariono

Memulai menulis Blog pada bulan November dari Tahun 2015. Penulis merupakan alumni dari Politeknik Negeri Malang angkatan 2011 Program Studi Manajemen Informatika, Jurusan Elektro. Penulis memulai menekuni dunia programming mulai tahun 2014 dan sekarang bekerja di Pemerintahan sebagai IT Staff.

You may also like...