Mengatur Format Tanggal Datepicker jQuery UI

Jquery UI Datepicker sama halnya seperti Bootstrap Datepicker yang digunakan untuk menampilkan antar muka tanggal dalam bentuk kalender pada halam website. Secara default ketika Jquery ui tidak di atur format tanggalnya, maka dia akan menampilkan tanggal dengan format tanggal seperti pada sistem bios komputer yaitu mm/dd/yyyy, maksudnya bulan/tanggal/tahun, jika menggunakan format tanggal seperti itu maka ketika tanggal diproses untuk disimpan kedatabase, kita harus membuat fungsi untuk mengkonversi tanggal kedalam format tanggal seperti didatabase

Baca juga : Cara Menghitung Jumlah Hari Diantara Dua Tanggal Menggunakan PHP

Penggunaan Datepicker Jquery UI sama saja seperti Bootstrap Datepicker, kita panggil Jquerynya lalu buat fungsi untuk memnggil tanggalnya. Disini Saya menggunakan jQuery UI versi 1.11.4
Contoh :

<link href="../assets/jquery-ui-1.11.4/smoothness/jquery-ui.css" rel="stylesheet" />

<script src="../assets/jquery-ui-1.11.4/jquery-ui.js"></script>

Selanjutnya buat fungsi untuk menentukan selektor atau id dari tanggal yang kita buat untuk input tanggal
Contoh :

<script>
$(function() {
$("#tanggal").datepicker({

});
});
</script>

Fungsi diatas tidak menentukan format dari tanggal yang ingin ditampilkan sehingga secara default Jquery ui akan menentukan format tanggalnya sendiri dengan menggunakan format tanggal mm/dd/yyyy. Oleh karenya saat di proses kita harus membuat fungsi untuk merubah format tanggal dari Jquery UI seperti berikut

Contoh :

function ubahTanggal($tanggal){
    $pisah = explode('/',$tanggal);
    $array = array($pisah[2],$pisah[0],$pisah[1]);
    $satukan = implode('-',$array);
    return $satukan;
}
$tgl_terbit = ubahTanggal($tanggal);

Bila ingin lebih praktis, kita bisa membuat format tanggal dari Jquery UI sesuai keinginan atau sesuai dengan format tanggal untuk database yaitu yyyy/mm/dd, sehingga tidak perlu repot – repot membuat fungsi untuk merubah tanggal seperti diatas.

Mengatur Format Tanggal JQUERY UI 1.11.4
Untuk bisa menentukan format tanggal sesuai dengan keinginan Anda bisa menggunakan contoh diabawah ini

<script>
$(function() {
$("#tanggal").datepicker({
dateFormat: 'yy/mm/dd'

});
});
</script>

Format tanggal diatas akan menghasilkan output tahun/bulan/tanggal sesuai dengan format tanggal di database. Anda bisa menambahkan fungsi atau script tambahan seperti
changeMonth dan changeYear untuk menampilkan kotak bulan dan tahun secara terpisah,

Contoh :

<script>
$(function() {
$("#tanggal").datepicker({
    dateFormat: 'yy/mm/dd',
    changeMonth: true,
    changeYear: true

});
});
</script>

Bila dieksekui maka Jquery UI diatas akan ditampilkan seperti berikut

Dokumentasi lengkapnya bisa dilihat di https://jqueryui.com/datepicker/.

Karen di komentar ada pertanyaan " mas..mohon bantuannya,, saya mau ubah format datepicker saya (ada tgl awal dan tgl akhir)
utk format tgl awal sudah bisa diubah formatnya jadi dd/mm/yy, tpi utk tgl akhir krna ada script hitung hari otomatis, jadinya script hitung otomatis itu malah menghitung mounth nya, bukan date nya.. mohon pencerahannya mas"

Saya sebenarnya tidak tahu pasti, tapi yang saya tangkap dari pertanyaan diatas adalah, bagaimana menjumlahkan dua tanggal yang dibuat menggunakan datepicker, lalu kemudian dua tanggal tersebut dihitung berapa harinya .

Langsung saja, berikut ini contohnya :

<html>
<body>

<div>
<div id="first">
  <span>Tanggal Awal : <span id="tgl_awal"></span></span>
</div>
<div id="second" style="margin-top: 10px;">
  <span>Tanggal Akhir : <span id="tgl_akhir"></span></span>
</div>
<div id="diff" style="margin-top: 10px;">
  Jumlah Hari: <span id="jw"></span>
</div>
</div>

<script>
var mD = {
 first: '',
 scnd: '',
  init: function(){
   this.setFirst();
   this.setSecond();
  },
 setFirst: function(){
   var _this = this;
   $("#first").datepicker({
      onSelect: function(){
        _this.first = $(this).val();
        $("#tgl_awal").html(_this.first)
        _this.calcDiff();
      }
    });
  },
  setSecond: function(){
   var _this = this;
    $("#second").datepicker({
     onSelect: function(){
       _this.scnd = $(this).val();
        $("#tgl_akhir").html(_this.scnd);
        _this.calcDiff();
     }
    });
  },
  calcDiff: function(){
    var date1 = new Date(this.first);
    var date2 = new Date(this.scnd);
    var timeDiff = Math.abs(date2.getTime() - date1.getTime());
    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
    if(date1 > date2){
     $("#jw").html("TANGGAL AWAL TIDAK BOLEH LEBIH BESAR DARI TANGGAL AKHIR");
    } else {
     $("#jw").html(diffDays);
    }
  }
}

mD.init();

</script>
</body>
</html>

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple

7 Responses to "Mengatur Format Tanggal Datepicker jQuery UI "

Maman AchmanJune 19, 2017 at 5:32 PM
Singgah di mari membawa segelas es cendol sambil belajar Mengatur Format Tanggal Datepicker jQuery UI pasti bikin maknyoosss...
Mang LembuJune 19, 2017 at 9:02 PM
Ooow...jadi begitu caranya ya mengatur almenak atau biasa disebut dengan kalender tanggalan dengan menggunakan format datepicker, ci mamang mah meni pinter ih
andi nugrahaJune 20, 2017 at 2:50 AM
Kalau kesini nih cocok buat belajar, bagusnya juga langsung dipraktekin ya, Mas.
Oh,ya mas. Untuk bisa PHP sendiri seperti mas Ahmad, kira-kira butuh waktu brapa lama? Atau tergantung dari kita belajarnya?
mogieAugust 6, 2018 at 12:00 PM
mas..mohon bantuannya,, saya mau ubah format datepicker saya (ada tgl awal dan tgl akhir)
utk format tgl awal sudah bisa diubah formatnya jadi dd/mm/yy, tpi utk tgl akhir krna ada script hitung hari otomatis, jadinya script hitung otomatis itu malah menghitung mounth nya, bukan date nya.. mohon pencerahannya mas

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin