Membuat Date Picker dengan CSS

Membuat Date Picker dengan CSSShare on FacebookTwitterTwitter
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:

date picker

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 :




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 :