Hallo sahabat Dumenity berjumpa lagi dalam tutorial kursuswebprogramming, pada tutorial kali ini kita akan belajar tentang Cara Membuat Format Tanggal dengan jQuery Date Picker. Dengan menggunakan pemilih tanggal jQuery kita dapat memformat tanggal yang dipilih dengan menggunakan opsi Format date. Pada pembahasan saya sebelumnya adalah Cara Membuat PHP Shopping Cart tanpa Database, bagi yang belum sempat membaca silahkan klik link tersebut.
Dalam tutorial ini, kita akan melihat bagaimana memformat tanggal dan mengambilnya dari popup kalender. Saya memiliki daftar format tanggal dalam select option. Saat mengubah nilai pada select option, saya menetapkan opsi dateFormat dengan format yang dipilih.
Script HTML untuk Format Tanggal dengan jQuery Date Picker
Script berikut untuk menampilkan tampilan Format Tanggal dengan jQuery Date Picker.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="frm-date-format"> <div class="frm-input-row"> <div class="frm-label">Select Date:</div> <div><input type="text" id="datepicker" size="30" class="form-input"></div> </div> <div class="frm-input-row"> <div>Formats:</div> <div> <select id="date-format" onchange="setDateFormat(this.value);" class="form-input"> <option value="mm/dd/yy">mm/dd/yy</option> <option value="dd/mm/yy">dd/mm/yy</option> <option value="yy-mm-dd">yy-mm-dd</option> <option value="M d, y">M d, y</option> </select> </div> </div> </div> |
Mengatur dateFormat menggunakan jQuery
Kode jQuery ini digunakan untuk mengatur format tanggal dalam memilih tanggal menggunakan pemilih tanggal. Saya memiliki fungsi untuk memformat tanggal yang akan dipanggil pada bidang pemilihan tanggal perubahan.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function() { $( "#datepicker" ).datepicker(); }); function setDateFormat(date_format) { $( "#datepicker" ).datepicker( "option", "dateFormat", date_format ); } </script> |
Berikut hasil dari codingan di atas ,
Oke itulah tadi pembahasan saya tentang Cara Membuat Format Tanggal dengan jQuery Date Picker semoga bermanfaat.