Hasilnya akan sepeti ini :#datePicker [type="date"]{background:#fff;} #datePicker [type="date"]::-webkit-inner-spin-button{display: none;} #datePicker [type="date"]::-webkit-calendar-picker-indicator{opacity: 0;} #datePicker label{display: block;} #datePicker input{ border: 1px solid #c4c4c4; border-radius: 5px; background-color: #fff; padding: 3px 5px; box-shadow: inset 0 3px 6px rgba(0,0,0,0.1); width: 190px; }Pilih TanggalKalau ingin yang lebih simple lagi, cukup kita buat code input dengan type date seperti ini:Hasilnya jadi seperti ini : ">
Tidak perlu javascript untuk membuat date picker, cukup dengan HTML dan CSS kita sudah bisa membuat datepicker yang fungsional secara default, codenya hanya seperti ini:Code Date Picker<style>#datePicker [type="date"]{background:#fff;}#datePicker [type="date"]::-webkit-inner-spin-button{display: none;}#datePicker [type="date"]::-webkit-calendar-picker-indicator{opacity: 0;}#datePicker label{display: block;}#datePicker input{ border: 1px solid #c4c4c4; border-radius: 5px; background-color: #fff; padding: 3px 5px; box-shadow: inset 0 3px 6px rgba(0,0,0,0.1); width: 190px;}</style><h2>DATE PICKER</h2><div id="datePicker"> <label for="tgl">Pilih Tanggal</label> <input type="date" name="tgl" id="tgl"/></div>Hasilnya akan sepeti ini :#datePicker [type="date"]{background:#fff;} #datePicker [type="date"]::-webkit-inner-spin-button{display: none;} #datePicker [type="date"]::-webkit-calendar-picker-indicator{opacity: 0;} #datePicker label{display: block;} #datePicker input{ border: 1px solid #c4c4c4; border-radius: 5px; background-color: #fff; padding: 3px 5px; box-shadow: inset 0 3px 6px rgba(0,0,0,0.1); width: 190px; }Pilih TanggalKalau ingin yang lebih simple lagi, cukup kita buat code input dengan type date seperti ini:<input type="date" name="tgl" id="tgl" aria-label="Pilih Tanggal"/>Hasilnya jadi seperti ini :