Mengatur Format Tanggal Datepicker Jquery Ui
Jquery UI Datepicker sama halnya seperti Bootstrap Datepicker yang dipakai untuk menampilkan antar muka tanggal dalam bentuk kalender pada halam website. Secara default ketika Jquery ui tidak di atur format tanggalnya, maka ia akan menampilkan tanggal dengan format tanggal menyerupai pada sistem bios komputer yaitu mm/dd/yyyy, maksudnya bulan/tanggal/tahun, kalau memakai format tanggal menyerupai itu maka ketika tanggal diproses untuk disimpan kedatabase, kita harus membuat fungsi untuk mengkonversi tanggal kedalam format tanggal menyerupai didatabase
Penggunaan Datepicker Jquery UI sama saja menyerupai Bootstrap Datepicker, kita panggil Jquerynya kemudian buat fungsi untuk memnggil tanggalnya. Disini Saya memakai jQuery UI versi 1.11.4
misal :
<!-- 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 memilih selektor atau id dari tanggal yang kita buat untuk input tanggal
misal :
<script>
$(function() {
$("#tanggal").datepicker({
});
});
</script>
Fungsi diatas tidak memilih format dari tanggal yang ingin ditampilkan sehingga secara default Jquery ui akan memilih format tanggalnya sendiri dengan memakai format tanggal mm/dd/yyyy. Oleh karenya ketika di proses kita harus membuat fungsi untuk merubah format tanggal dari Jquery UI menyerupai diberikut
misal :
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 dapat membuat format tanggal dari Jquery UI sesuai impian atau sesuai dengan format tanggal untuk database yaitu yyyy/mm/dd, sehingga tidak perlu repot – repot membuat fungsi untuk merubah tanggal menyerupai diatas.
Mengatur Format Tanggal JQUERY UI 1.11.4
Untuk dapat memilih format tanggal sesuai dengan impian Anda dapat memakai teladan 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 dapat menambahkan fungsi atau script komplemen menyerupai
changeMonth dan changeYear untuk menampilkan kotak bulan dan tahun secara terpisah,
misal :
<script>
$(function() {
$("#tanggal").datepicker({
dateFormat: 'yy/mm/dd',
changeMonth: true,
changeYear: true
});
});
</script>
Bila dieksekui maka Jquery UI diatas akan ditampilkan menyerupai diberikut
Dokumentasi lengkapnya dapat dilihat di https://jqueryui.com/datepicker/.
Karen di komentar ada pertanyaan " mas..mohon menolongannya,, saya mau ubah format datepicker saya (ada tgl awal dan tgl akhir)
utk format tgl awal sudah dapat diubah formatnya jadi dd/mm/yy, tpi utk tgl selesai krna ada script hitung hari otomatis, risikonya script hitung otomatis itu malah menghitung mounth nya, bukan date nya.. mohon pencerahannya mas"
Saya sesungguhnya tidak tahu pasti, tapi yang saya tangkap dari pertanyaan diatas adalah, bagaimana menjumlahkan dua tanggal yang dibentuk memakai datepicker, kemudian kemudian dua tanggal tersebut dihitung berapa harinya .
Langsung saja, diberikut ini contohnya :
Karen di komentar ada pertanyaan " mas..mohon menolongannya,, saya mau ubah format datepicker saya (ada tgl awal dan tgl akhir)
utk format tgl awal sudah dapat diubah formatnya jadi dd/mm/yy, tpi utk tgl selesai krna ada script hitung hari otomatis, risikonya script hitung otomatis itu malah menghitung mounth nya, bukan date nya.. mohon pencerahannya mas"
Saya sesungguhnya tidak tahu pasti, tapi yang saya tangkap dari pertanyaan diatas adalah, bagaimana menjumlahkan dua tanggal yang dibentuk memakai datepicker, kemudian kemudian dua tanggal tersebut dihitung berapa harinya .
Langsung saja, diberikut 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>
Post a Comment for "Mengatur Format Tanggal Datepicker Jquery Ui"