Изменить тип ввода даты на значок

Question

Как я могу изменить дизайн своего в значок или изображение?Если это возможно, могу ли я получить значение или дату, если это произойдет?Я попытался найти ответ, но безуспешно.Я видел изменение стрелки на иконку, но это не то, что мне нужно.Пожалуйста, смотрите изображение.Мне нужно изменить текстовое поле на изображение и по-прежнему запускать средство выбора даты, и при этом я могу получать данные

Изображение:

Код:

.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">

Answer 1

Вы можете скрыть ввод и применить стили к метке, связанной с ним, выбранное значение также будет скрыто, но вы можете получить к нему доступ через JS и, конечно, будет доступно при отправке формы.

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">

Обновленное решение для Chrome: Способ отображения собственного средства выбора даты в Chrome