Отображение даты выбора типа & lt; input type = & ldquo; date & rdquo; & gt; с javascript для Chrome [дубликат]

Вот способ запуска datepicker, когда пользователи нажимают на это поле, потому что неграмотные пользователи компьютеров не знают, куда они должны щелкнуть:

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

/* create a new arrow, because we are going to mess up the native one
see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
input[type="date"]:after {
    content: "\25BC"; 
    color: #555;
    padding: 0 5px;
}

/* change color of symbol on hover */
input[type="date"]:hover:after {
    color: #bf1400;
}

/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
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;
}

/* adjust increase/decrease button */
input[type="date"]::-webkit-inner-spin-button {
    z-index: 1;
}

 /* adjust clear button */
 input[type="date"]::-webkit-clear-button {
     z-index: 1;
 }

<input type="date">

Ссылки:

• Список символов
• Пример кода с шрифтом-удивительным значком

Я думаю, что люди очень часто хотят использовать другую иконку или элемент, чтобы открыть собственное поле datepicker.

Я выяснил, что решение javascript с функцией «click () & amp ;.focus ()» работает только в webkit и некоторых других браузерах на рабочем столе, но, к сожалению, не в FireFox.

Но это возможно другим путем: наложение входного поля над элементом значка (или тем, что вы хотите использовать), и сделало его невидимым с помощью непрозрачности 0.

Это действительно отлично работает на мобильных устройствах, для настольных устройств я бы предложите добавить событие onclick в качестве резервной «$ ('. dateInpuBox»). click (). focus () "

    .myBeautifulIcon {
      position: relative;
      width: 50px;
    }
    .dateInputBox {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
    }

<div class="myBeautifulIcon">
  ICON
  <input class="dateInputBox" type="date" />
</div>

Хитрость заключается в том, чтобы запустить F4 KeyboardEvent на входном элементе:

function openPicker(inputDateElem) {
    var ev = document.createEvent('KeyboardEvent');
    ev.initKeyboardEvent('keydown', true, true, document.defaultView, 'F4', 0);
    inputDateElem.dispatchEvent(ev);
}

var cal = document.querySelector('#cal');
cal.focus();
openPicker(cal);

здесь jsfiddle: http://jsfiddle.net/v2d0vzrr/

Кстати, есть интересная ошибка в хроме. Если вы откроете jsfiddle на отдельной вкладке, всплывающее окно календаря будет отображаться на текущей вкладке. Уже сообщили .

Для рабочего стола (и мобильного) поместите ввод в div с относительным позиционированием и значок со вводом, следующим образом:

input {
  position: absolute;
  opacity: 0;

  &::-webkit-calendar-picker-indicator {
    position: absolute;
    width: 100%;
  }
}

Это растягивает индикатор выбора по полному родительскому div, так что он всегда показывает контроль даты, когда вы нажимаете значок родительского div и / или текст.