CODEWITHSUNDEEP
javascripthtmlcss
Ilan Biala
Ilan Biala

Reputation: 3417

Change date input triangle to a calendar icon

Right now I'm focusing on getting the input[type="date"] in Google Chrome to display a calendar icon (.png) instead of the downwards triangle that it uses by default. I've tried to do something with styling the Shadow elements inside the input, but that requires I shift around all the other elements and since those are using flexbox, it doesn't seem very simple. I'm looking to also have the calendar icon be shown all the time, but I haven't figured out a way to do that yet.

Upvotes: 30

Views: 150850

Answers (7)

H S W
H S W

Reputation: 7119

To change the icon, you can choose the icon from here https://materialdesignicons.com/ and then also change it in code as follow:

/* I changed the icon to clock-outline, which I selected from https://materialdesignicons.com/ */

input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 1;
    display: block;
    background: 'mdi mdi-24px mdi-clock-outline' no-repeat;
    width: 24px;
    height: 24px;
}

Upvotes: 2

Mr ismail alla
Mr ismail alla

Reputation: 59

i found this solution i hope it will hep you

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

//inside the url select your icon.svg
  content: url(./assets/icon/chevron-down-circle-outline.svg);

}

Upvotes: 1

Simon Watson
Simon Watson

Reputation: 1757

A more cross browser alternative would be to position a calendar icon over top of the triangle calendar picker indicator and then set the calendar icon to pointer-events: none which will cause all click events to be passed through to the triangle calendar picker indicator underneath. I'm not entirely sure how consistent the position of the calendar picker indicator is in different browsers but it should be pretty similar. See the example below.

.sd-container {
  position: relative;
  float: left;
}

.sd {
  padding: 5px 10px;
  height: 30px;
  width: 150px;
}

.open-button {
  position: absolute;
  top: 10px;
  right: 11px;
  width: 25px;
  height: 25px;
  background: #fff;
  pointer-events: none;
}

.open-button button {
  border: none;
  background: transparent;
}
<form>
  <div class="sd-container">
    <input class="sd" type="date" name="selected_date" />
    <span class="open-button">
      <button type="button">📅</button>
    </span>
  </div>
</form>

Also it is possible to change some of the appearance of the date input field (but not the calendar date picker) as it styles similar to a text input field. In addition there are a number of WebKit CSS properties that are explained here Are there any style options for the HTML5 Date picker?

Upvotes: 14

djibe
djibe

Reputation: 3038

Love Material Design ? Use this code (only for Chrome and Safari).

Want to restrict picker to Dates (not months or datetime-local) ? Add input[type="date"] before selectors.

Just copy-paste this CSS and add it to your own CSS code.

::-webkit-search-cancel-button,
::-webkit-clear-button {
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg fill="%23000" fill-opacity=".54" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"/%3E%3Cpath d="M0 0h24v24H0z" fill="none"/%3E%3C/svg%3E');
  color: rgba(0, 0, 0, 0.54);
  cursor: pointer;
  height: 1.5rem;
  margin-right: 0;
  width: 1.5rem;
}

::-webkit-calendar-picker-indicator {
  color: rgba(0, 0, 0, 0);
  opacity: 1;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg fill="%23000" fill-opacity=".54" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/%3E%3Cpath d="M0 0h24v24H0z" fill="none"/%3E%3C/svg%3E');
  width: 14px;
  height: 18px;
  cursor: pointer;
  border-radius: 50%;
  margin-left: .5rem;
}
::-webkit-calendar-picker-indicator:hover {
  -webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04);
          box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">

<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="form-group">
        <label for="exampleInput2bis">Date</label>
        <input class="form-control" id="exampleInput2bis" placeholder="Date" type="date">
      </div>
    </div>
  </div>
</div>

Upvotes: 7

curiosity26
curiosity26

Reputation: 181

@Aweary has the best example, but Chrome 59 doesn't like using ::after on ::-webkit-calendar-picker-indicator. So here's an adjustment I made using FontAwesome icons that achieves the same goal.

input[type="date"] {
  position: relative;
  padding: 10px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  color: transparent;
  background: none;
  z-index: 1;
}

input[type="date"]:before {
  color: transparent;
  background: none;
  display: block;
  font-family: 'FontAwesome';
  content: '\f073';
  /* This is the calendar icon in FontAwesome */
  width: 15px;
  height: 20px;
  position: absolute;
  top: 12px;
  right: 6px;
  color: #999;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<input type="date">

Upvotes: 12

Oscar Fuquen
Oscar Fuquen

Reputation: 559

The code below works for me

input[type="date"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url(https://mywildalberta.ca/images/GFX-MWA-Parks-Reservations.png) no-repeat;
    width: 20px;
    height: 20px;
    border-width: thin;
}
<input type="date" />

Upvotes: 50

Aweary
Aweary

Reputation: 2312

Here you go.

Chrome provides pseudo-elements for their date picker. We can use ::-webkit-calendar-picker-indicator along with another pseudo-element on that element to hide the current triangle and overlay a PNG of our choosing.

::-webkit-calendar-picker-indicator {

  color: rgba(0, 0, 0, 0);
  opacity: 1
}

::-webkit-calendar-picker-indicator::after {

  content: '';
  display: block;
  background: url(/*yourURLHere*/) no-repeat;
  background-size: 10%;
  width: 100px;
  height: 100px;
  position: absolute;
  transform: translateX(-2%);

}

You can tweak the positioning and all that yourself, but the main thing you have to do is make the current indicator clear by setting its alpha channel to 0, then adding a pseudo element after the indicator element that will display your png.

You can also make the icon visible at all times by setting the opacity to 1.

Upvotes: 7

Related Questions