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

default jquery ui datepicker


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 :
<!-- Date Picker CSS-->
<link href="../assets/jquery-ui-1.11.4/smoothness/jquery-ui.css" rel="stylesheet" />
<!-- Date Picker JS -->
<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

jquery ui datepicker

 
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>


Related Posts :

7 Responses to "Mengatur Format Tanggal Datepicker jQuery UI "

  1. Singgah di mari membawa segelas es cendol sambil belajar Mengatur Format Tanggal Datepicker jQuery UI pasti bikin maknyoosss...

    ReplyDelete
  2. Ooow...jadi begitu caranya ya mengatur almenak atau biasa disebut dengan kalender tanggalan dengan menggunakan format datepicker, ci mamang mah meni pinter ih

    ReplyDelete
  3. 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?

    ReplyDelete
    Replies
    1. sampai sekarang masih terus belajar,, dan tidak tahu kapan berhentinya

      Delete
    2. Setuju kang, belajar mah terus haus. Tak pernah henti :)

      Delete
  4. 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

    ReplyDelete
    Replies
    1. jadi semacam menjumlahkan dua tanggal, teurs dihitung harinya gitu ?? coba cek contoh diatas..

      Delete

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...