Source: Web Jalanan Blog

Web Jalanan Blog 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 :#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 :

Read full article »
Est. Annual Revenue
$100K-5.0M
Est. Employees
25-100
CEO Avatar

CEO

Update CEO

CEO Approval Rating

- -/100