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:
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)
<html lang="en">
<head>
<title></title>
</head>
<body>
<input type="date" value="2012-02-01" />
</body>
</html>
dan hasilnya akan menjadi seperti ini:
disini <input type='date' value='2012-02-01' /> 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:
<html lang="en">
<head>
<title></title>
</head>
<body>
<input id="inputdate" type="date" value="" />
</body>
<script type="text/javascript">
var d=new Date("2022-03-18");
var currentYear = d.getFullYear();
var today = d.getDate();
if(today<10)
{
today="0"+today;
}
var currentMonth = d.getMonth() + 1;
if(currentMonth<10)
{
currentMonth="0"+currentMonth;
}
strfulldate=currentYear+"-"+currentMonth+"-"+today;
document.getElementById("inputdate").value=strfulldate;
</script>
</html>
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: