Dalam proses pembuatan website para programmer pasti akan menghadapi proses pembuatan inputan yang berjenis tanggal, baik itu untuk membuat seperti formulir pengisian data member ataupun pengisian sebuah form transaksi yang membutuhkan tanggal.
Cara lama yang saya pakai sebelum mengenal html type adalah menggunakan input text biasa dan dimodifikasi dengan jquery sehingga inputan text tadi mempunyai aturan pengisian sesuai dengan format yang ditentukan (dalam kasus saya dd/mm/yyyy). Okey, cara yang saya lakukan diatas mungkin akan saya bahas diartikel berikutnya sebagai sebuah alternative. Namun, cara diatas sungguh merepotkan dan memakan banyak waktu. Sebagai gantinya saya menggunakan object html 5 yaitu input type date.
Sejak menggunakan input type date banyak proses yang harus dilalui dengan cara lama dapat dipersingkat. Tentu saja ini membuat saya merasa "Kok ga dari dulu ya pakai cara ini hehehe, tapi gpp hidup harus terus belajar... (sambil menangis)". Beberapa keuntungan dari penggunaan input type date dibanding menggunakan input type text dengan bantuan jquery adalah:
- Dengan menggunakan html input date kita tidak memerlukan proses rubah format tanggal kedalam format tanggal yang diterima oleh database di server ( di browser dd/mm/yyyy sedangkan database kita berformat yyyy-mm-dd).
- Tidak perlu mengetik coding banyak.
- Tampilan yang bagus dengan pop up kalender
Untuk proses pembuatannya dapat anda lihat dari contoh dibawah ini:
1. Buka file view php anda, misal dicontoh belajar.php (dalam kasus ini saya memakai php, bisa juga file html)
dan hasilnya akan menjadi seperti ini:
disini berarti bahwa inputan tanggal diset awal menjadi tanggal 01/02/2012. Untuk value harus diset dengan format YYYY-mm-dd, yang artinya (Tahun)-(bulan)-(tgl) : '2012-02-01'. Sedangkan display dari input date dikondisikan sesuai dengan format tgl yang disetting dioperasi sistem.
2. Set value (nilai kalendar date) dengan javascript
Apabila kita ingin memberi nilai pada input date via javascript maka berikut adalah contoh codenya:
Dimana kita harus membuat sebuah string dari javascript dengan format YYYY-mm-dd. Digit dari string tanggal tersebut harus sama persis jumlahnya, yaitu tahun 4 digit, bulan 2 digit, dan tanggal 2 digit (2022-03-18).
Okey gimana!, cukup mudah kan teman-teman semoga dengan share ilmu ini bisa memperlancar proyek web teman-teman yang ada inputan tanggalnya.
Bagi anda pemilik usaha yang ingin menerapkan sistem komputer untuk kontrol stok, rekap laporan otomatis, laba-rugi otomatis, sistem kasir,dan barcode qrcode. Dapat mencoba aplikasi partheon stok.. GRATIS 100%. Installnya mudah cukup KLIK/TAP link gambar dibawah ini:
jadi di sebuah html ada yang namanya input dengan type date, yang di mana html tersebut bisa menampilkan sebuah kalender yang dapat user pilih tanggal yang di inginkan.
mungkin di antara kalian juga sudah sering menjumpai kalender tersebut biasanya ada pada aplikasi pemesanan tiket pesawat boking hotel dll.
nah di kesempatan kali ini saya akan menunjukkan cara membuatnya dan cara mengcetak nilai tanggal yang di pilih oleh user.
di tutorial ini hanyalah dasarnya saja, selebihnya bisa kalian kreasikan sendiri sesuai kebutuhan, atau kalian juga bisa mengkombinasikannya dengan formulir order menuju whatsapp di blogger itu juga bisa bangat ya.
Membuat Input Tanggal Dengan Tampilan Kalender
pertama buat dulu html input dengan type date dan beri nama id sesuai keinginanmu, di sini saya memberikan nama id tanggal dan saya menggunakan onchange untuk menjalankan fungsi cetak nantinya
dan di sini saya buat sebuah div untuk menampung nilainya nanti saya beri id cetak dan di teksnya saya beri teks hari ini tujuannya agar ketika user tidak memilih tanggalnya maka nilai yang di ambil adalah hari ini
<div id='cetak'>Hari ini</div>dan tambahkan javascript ini agar input value defaultnya tanggal hari ini, jika tidak tampilannya hanya hh/bb/tttt
document.querySelector('#tanggal').value = new Date().toISOString().substring(0, 10);dan tambahkan javascript ini berfungsi untuk mengcetak tanggal yang di pilih oleh user ke dalam tag div dengan id cetak yang telah kita buat sebelumnya.
function cetakTanggal() { var tanggal = document.querySelector('#tanggal').value; document.querySelector('#cetak').innerHTML = tanggal.split('-')[2]+'-'+tanggal.split('-')[1]+'-'+tanggal.split('-')[0]; }sehingga kode keseluruhan akan tampak seperti ini.
<input type='date' id='tanggal' name='tanggal' onchange='cetakTanggal()'/> <!-- hasil akan tercetak di dalam div ini --> <div id='cetak'>Hari ini</div> <script> // set default tanggal saat ini document.querySelector('#tanggal').value = new Date().toISOString().substring(0, 10); // fungsi onchange cetak nilai function cetakTanggal() { var tanggal = document.querySelector('#tanggal').value; document.querySelector('#cetak').innerHTML = tanggal.split('-')[2]+'-'+tanggal.split('-')[1]+'-'+tanggal.split('-')[0]; } </script>DEMO
ok jadi sekian cara membuat input tanggal dengan tampilan kalender yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.