Способ отображения родного datepicker в Chrome

Я использую поля <input type="date">, которые изящно возвращаются к jQuery, когда браузер не поддерживает эту область. Относительно недавно Chrome начал предлагать собственный сборщик дат, и это здорово. Но я обнаружил, что многие пользователи пропускают небольшую стрелку, которая вызывает календарь, и поэтому упускают из виду тот факт, что для выбора даты есть простой календарь.

Чтобы сделать это более интуитивно понятным, было бы здорово, если бы я смог открыть собственный пользовательский интерфейс datepicker, когда пользователь перемещает фокус на вход или нажимает на другой элемент (например, маленький значок календаря).

Есть ли способ, который я могу использовать в Chrome для запуска пользовательского интерфейса datepicker?

Ответы

Ответ 1

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

input[type="date"]:hover::-webkit-calendar-picker-indicator {
  color: red;
}
input[type="date"]:hover:after {
  content: " Date Picker ";
  color: #555;
  padding-right: 5px;
}
input[type="date"]::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0;
}

<input type="date" />

Ответ 2

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

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

Ответ 3

Трюк состоит в том, чтобы запустить 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 на отдельной вкладке, всплывающее окно календаря будет отображаться на текущей вкладке. Он уже сообщил.

Ответ 4

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

input {
  position: absolute;
  opacity: 0;

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

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

Ответ 5

Благодаря Энди Трюку я получил кинематографическое решение, работающее над Chrome, и добавил образец стиля зависания.

div {
  position: relative;
}
input {
  position: absolute;
  opacity: 0;
}
input::-webkit-calendar-picker-indicator {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
input:hover + button {
  background-color: silver;
}

<div>
  <input type="date">
  <button id="calendar_text">Search Date 📅</button>
</div>

Ответ 6

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

Я понял, что решение javascript с "click() и .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>