Halo teman – teman selamat datang kembali di website tips dan trik Dumet School, tentunya banyak sekali tips dan trik seputar dunia website untuk itu selalu kunjungi terus website ini ya 🙂
Baik, pada kesepatan kali ini saya akan memberikan tips dan trik tentang Membuat Date Picker Range jQuery UI dimana pada artikel sebelumnya kita sudah pernah membuat date picker dengan jQuery UI. Pada studi case kali ini kita akan membuat sebuah range date picker, kasusnya adalah saya akan membuat range diskon. Dan diskon akan berlaku dari tanggal mulai sampai batas diskon, ini biasanya digunakan untuk input data pada administrator. Contoh sederhana nya seperti gambar di bawah ini
Langsung saja kita praktekkan Membuat Date Picker Range jQuery UI teman – teman siapkan text editornya, kemudian kita masukkan terlebih dahulu library jQuery dan jQuery UI nya
<p><link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"></p><p> <script src="https://code.jquery.com/jquery-1.12.4.js"></script></p><p> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script></p><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>
Dan buat file index.html kemudian masukkan script html nya di bawah ini
<p><h3>Periode diskon</h3></p><p> <p>Mulai tanggal dari <input type="text" class="datepicker"> Sampai tanggal <input type="text" class="datepicker"></p></p><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>
Kemudian tambahkan script jQuery UI nya untuk menjalankan datepicker nya
<p><script></p><p> $( function() {</p><p> $( ".datepicker" ).datepicker();</p><p> });</p><p> </script></p><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>
Jika sudah save dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini
Secara default bulan hari dan tanggal sudah ada pada datepicket, dan saya akan tambahkan sedikit agar tahun dan bulan tampil dropdown. Saya akan menambahkan script
changeMonth : true dan changeYear : true
Di dalam datepicker nya
Maka jika saya save dan refresh pada browsernya, bulan dan tahun akan tampil dropdown
Dengan adanya dropdown akan mempercepat pencarian bulan dan tahun tanpa harus klik prev atau next, baik sekian pada artikel kali ini tentang Membuat Date Picker Range jQuery UI kita akan berjumpa kembali pada tips dan trik yang akan datang. Semoga bemanfaat dan bias menjadi refrensi untuk teman – teman, terimakasih dan sampai jumpa.
Indahnya berbagi ?