Membuat Date Picker dengan CSS

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 :

Pilih Tanggal

---

Kalau ingin yang lebih simple lagi, cukup kita buat code input dengan type date seperti ini:
<input type="date" name="tgl" id="kalender" aria-label="Pilih Tanggal"/>


Hasilnya jadi seperti ini :

---

---