Change input type date to icon

Question

How can I change the design of my into a icon or image? If its possible can I still get the value or the date if that happens? I have tried to google some answer but no luck. I've seen changing the arrow to icon but that's not what I need. Please see image. I need to change the text box into an image and still trigger the date picker and still be able to get the data picked

Image:

Input type Date

Code:

.form-control {
  background-color: #fff;
  background-image: none;
  border: 1px solid rgba(0, 0, 0, .07);
  font-family: Arial, sans-serif;
  color: #2c2c2c;
  outline: 0;
  height: 35px;
  padding: 9px 15px;
  line-height: normal;
  font-size: 14px;
  font-weight: 400;
  vertical-align: middle;
  min-height: 35px;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: all .2s linear 0s;
  transition: background .2s linear 0s;
  width: 100%;
  cursor: pointer;
}

<input type="date" class="form-control">

@Adam an image sir, I want to change the text box of the input type date into an icon or image and still trigger the datepicker and get its value — , Jun 08 '18 at 03:18
what kinda of image you are trying to add? or is it one color Icon? — Adam, Jun 08 '18 at 03:31
something like this [codepen.io](https://codepen.io/kruxor/pen/kpesI) — Adam, Jun 08 '18 at 03:32
no sir, literally change the textbox of input date into an image and when I click the image the date picker will be trigger and when i choose a date i can still get the date i chose — , Jun 08 '18 at 03:37

Ander · Answer 1 · 2018-06-08T06:55:25.880

2

You can hide the input and apply styles to the label associated with it, the selected value would be hidden too, but you can access it via JS and, of course, would be available on submitting the form.

label {
  display: block;
  width: 150px;
  height: 150px;
  background: url(http://placehold.it/150x150) no-repeat;
  
}

.form-control {
  margin-top: -1em;
  opacity: 0;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
}

<label for="date-picker" tabindex="0"></label>
<input type="date" class="form-control" id="date-picker">

Updated solution for chrome: Method to show native datepicker in Chrome

edited Jun 08 '18 at 06:55

answered Jun 08 '18 at 06:34

Ander

758
7
15

@LawrenceAgulto How does it not work? I click on the picture and get the builtin datepicker (latest Chrome on Windows x64). – Álvaro González Jun 08 '18 at 08:42
@ÁlvaroGonzález It didn't work, I updated the answer, on firefox it isn't necessary all the webkit-calendar-picker-indicator stuff – Ander Jun 08 '18 at 09:04
@ÁlvaroGonzález I want to change the text box into an image and still have the functionality of a input type date – Jun 09 '18 at 02:17
You still got the functionality, it's not showing the input value, but you can access it with js, if what you want is to show the value you can display with js. – Ander Jun 09 '18 at 11:58

Change input type date to icon

1 Answers1