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
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 :
<!-- 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
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 :
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>
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 simpel
Singgah di mari membawa segelas es cendol sambil belajar Mengatur Format Tanggal Datepicker jQuery UI pasti bikin maknyoosss...
ReplyDeleteOoow...jadi begitu caranya ya mengatur almenak atau biasa disebut dengan kalender tanggalan dengan menggunakan format datepicker, ci mamang mah meni pinter ih
ReplyDeleteKalau kesini nih cocok buat belajar, bagusnya juga langsung dipraktekin ya, Mas.
ReplyDeleteOh,ya mas. Untuk bisa PHP sendiri seperti mas Ahmad, kira-kira butuh waktu brapa lama? Atau tergantung dari kita belajarnya?
sampai sekarang masih terus belajar,, dan tidak tahu kapan berhentinya
DeleteSetuju kang, belajar mah terus haus. Tak pernah henti :)
Deletemas..mohon bantuannya,, saya mau ubah format datepicker saya (ada tgl awal dan tgl akhir)
ReplyDeleteutk 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
jadi semacam menjumlahkan dua tanggal, teurs dihitung harinya gitu ?? coba cek contoh diatas..
Delete