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.

<div class="row">
 <div class="col-lg-6">
  <div class="form-group">
   <label>Tgl Awal</label>
   <div class="input-group date">
    <div class="input-group-addon">
           <span class="glyphicon glyphicon-th"></span>
       </div>
       <input id="tgl_mulai" placeholder="masukkan tanggal Awal" type="text" class="form-control datepicker" name="tgl_awal">
   </div>
  </div>
  <div class="form-group">
   <label>Tgl Akhir</label>
   <div class="input-group date">
    <div class="input-group-addon">
           <span class="glyphicon glyphicon-th"></span>
       </div>
       <input id="tgl_akhir" placeholder="masukkan tanggal Akhir" type="text" class="form-control datepicker" name="tgl_akhir">
   </div>
  </div>
 </div>
</div>

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

<script type="text/javascript">
   $(function(){
     $(".datepicker").datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayHighlight: true,
    });
    $("#tgl_mulai").on('changeDate', function(selected) {
        var startDate = new Date(selected.date.valueOf());
        $("#tgl_akhir").datepicker('setStartDate', startDate);
        if($("#tgl_mulai").val() > $("#tgl_akhir").val()){
          $("#tgl_akhir").val($("#tgl_mulai").val());
        }
    });
 });
</script>

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.

The post Membuat Range Datepicker Bootstrap appeared first on Mr Agus.

Seperti kita ketahui datepicker merupakan salah satu komponen yang penting pada sebuah form yang membutuhkan input sebuah date atau datetime. Misalnya untuk form tgl lahir pada data pegawai atau siswa. Sebenarnya di html sudah menyediakan type untuk inputan berupa date, tetapi pada beberapa browser view yang di tampilan bisa berbeda – beda. Oleh karena itulan plugin datepicker ini dibutuhkan untuk keseragaman tampilan dan kustomisasi yang lebih lengkap.

Cara menggunakan bootstrap datepicker

Proses pemasang bootstrap datepicker cukup mudah, tetapi anda harus sudah menginstall paket bootstrap dan JQuery terlebih dahulu. Untuk komponen bootstrap datepickernya anda bisa mendownloadnya disini, versi datepicker yang saya gunakan adalah 1.6.4. Setelah selesai di download, kemudian pasang pada project anda, berikut adalah contoh lokasi dimana saya menempatkan plugin bootstrap datepicker.

Cara menggunakan bootstrap datepicker

Kemudian panggil komponen css dan javascriptnya pada file index yang anda buat.

Memasang asset css bootstrap datepicker

Memasang assets javascript bootstrap datepicker

Setelah javascript dan css selesai dipasang, kita buat sebuah file yang akan digunakan untuk menampilan form datepicker. Berikut adalah contoh form yang saya buat.

<div class="row">
 <div class="col-lg-6">
  <div class="form-group">
   <label>Tgl Awal</label>
   <div class="input-group date">
    <div class="input-group-addon">
           <span class="glyphicon glyphicon-th"></span>
       </div>
       <input placeholder="masukkan tanggal Awal" type="text" class="form-control datepicker" name="tgl_awal">
   </div>
  </div>
  <div class="form-group">
   <label>Tgl Akhir</label>
   <div class="input-group date">
    <div class="input-group-addon">
           <span class="glyphicon glyphicon-th"></span>
       </div>
       <input placeholder="masukkan tanggal Akhir" type="text" class="form-control datepicker" name="tgl_akhir">
   </div>
  </div>
 </div>
</div>

Tambahkan juga javascript untuk menginisialisasi datepickernya.

<script type="text/javascript">
 $(function(){
  $(".datepicker").datepicker({
      format: 'yyyy-mm-dd',
      autoclose: true,
      todayHighlight: true,
  });
 });
</script>

Pasang dan simpan script diatas, kemudian kita tes hasil dari form datepickernya. Berikut adalah hasil untuk tampilan bootstrap datepicker yang berhasil kita buat.

Cara menggunakan bootstrap datepicker

Bootstrap datepicker juga memiliki banyak option, kita bisa menambahkan sesuai dengan kebutuhan yang diperlukan. Kita bisa membuat range datepicker, show weekdays, today button, autoclear, dsb, inillah yang membuat bootstrap datepicker menjadi plugin yang populer dikarenakan banyak fitur yang bisa di kustomisasi.

Sekian tulisan dari saya, semoga dapat bermanfaat. Terimakasih.

The post Cara menggunakan bootstrap datepicker appeared first on Mr Agus.