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/

5 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

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