CODEWITHSUNDEEP
javascriptcsshtmldateinput
MJ_Wales
MJ_Wales

Reputation: 893

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

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

Upvotes: 3

Views: 24907

Answers (2)

Gaurav
Gaurav

Reputation: 335

Try following code:

[type="date"]::-webkit-inner-spin-button {
  display: none;
}

[type="date"]::-webkit-calendar-picker-indicator {
  background: #fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png) 97% 50% no-repeat
}


/* 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

Upvotes: 10

Georgi Antonov
Georgi Antonov

Reputation: 1641

Basically what i would do is wrap the input in a relative positioned div put the calendar icon with position absolute after the input

HTML:

<div class="date-input-wrapper">
      <input type="date" required />
      <img src="your_icon.svg">
      OR
      <i class="some-icon-font some-icon">
</div>

CSS:

input[type=date]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    display: none;
}

Upvotes: -1

Related Questions