Question

135

How to change the appearance of input type=date datepicker?

rated 0 times [ 142] [ 7] / answers: 1 / hits: 17236 / 6 Years ago, tue, august 21, 2018, 12:00:00

I would like to change the default appearance of the input type=date datepicker from an arrow to a calendar icon and make it visible at all times.

Google searching this issue revealed very little. I came across the below post from 2012 which says its not possible, have things changed?

https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

herman

Add To Favorites

Follow

Total Points: 110

Total Questions: 90

Total Answers: 108

Location: Bosnia and Herzegovina

Member since Thu, Jun 24, 2021

3 Years ago

answered 6 Years ago minab · Accepted Answer

Try following code:

[type=date] {

  background: #fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png) 97% 50% no-repeat;

}



[type=date]::-webkit-inner-spin-button {

  display: none;

}



[type=date]::-webkit-calendar-picker-indicator {

  opacity: 0;

}





/* custom styles */



body {

  padding: 4em;

  background: #e5e5e5;

  font: 13px/1.4 Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;

}



label {

  display: block;

}



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;

}

<div>

  <h1>PURE CSS DATE PICKER</h1>

  <label for=dateofbirth>Date Of Birth</label>

  <input type=date name=dateofbirth id=dateofbirth>

</div>

You can also try bootstrap datepicker: Bootstrap Datepicker