Способ показа родного средства выбора даты в Chrome

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

Chrome Native Date Picker

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

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

Источник

11 ответов

Решение

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

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

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

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

<style>
::-webkit-calendar-picker-indicator {
    display: none;
}
</style>
<input type=date id=dateInput>
<script>
dateInput.addEventListener('keydown', function(event) {
    if (event.keyIdentifier == "Down") {
        event.preventDefault()
    }
}, false);
</script>

Вот документация от Webkit, где я получил вышеупомянутое:

http://trac.webkit.org/wiki/Styling%20Form%20Controls

Может быть, это можно сделать и сделать так, чтобы отображалось средство выбора даты, но спросите себя, хотите ли вы, чтобы каждый элемент управления календаря вылетал каждый раз, когда вы перемещали указатель мыши по странице?

Этот ответ также был полезен:

/questions/23812492/pochemu-izmenilos-povedenie-input-typedate/23812493#23812493

Источник

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

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

Ссылки:

Источник

Я получил решение Cinatic, работающее над 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>

Осторожно! этот стиль может вызвать неприятные воспоминания, используйте на свой страх и риск!

Уловка Энди: расширяет стрелку даты Chrome через ввод

решение cinatic: скрывает ввод поверх другого элемента

Источник

Ссылаясь на ответ Энди, я сделал всю область интерактивной и просто удалил значок календаря.

Результат во фрагменте Энди имеет небольшую область слева, на которую нельзя щелкнуть. (Chrome 87.0.4280.66)

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

input.picker[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  color: transparent;
  background: transparent;
}
         <input class="picker" type="date">

Источник

Хитрость заключается в том, чтобы запустить 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/

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

Источник

Chrome 99 должен решить эту проблему, добавив showPicker()метод. Начиная с Chrome 97 (дата выпуска 04.01.2021) он также доступен для тестирования разработчиков (т. е. с пометкой «функция»).

https://chromestatus.com/feature/5692248021794816

Источник

Ответ обновление Firefox / Chrome .

Вдохновленный другими ответами, я продвинул немного дальше Madacol нарешение Madacol,2021 года чтобы избавиться от плохого поведения в firefox, когда вы нажимали справа от кнопки (сброс ввода). Вот.

Источник

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

input {
  position: absolute;
  opacity: 0;

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

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

Источник

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

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

Но это возможно другим способом, наложив inputField на элемент icon (или все, что вы хотите использовать) и сделав его неуязвимым с непрозрачностью 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>

Источник

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

<input type="date" id="started[date]" name="started[date]">
<label class="btn btn-info btn-date" type="button" for="started[time]">
    <i class="far fa-calendar-alt"></i>
</label>
Источник

Я просто хочу добавить свой ответ для тех, кто ищет еще более простое и быстрое решение. Я просто использую два события на входе .onfocusа также .onblur

      <input type="text" name="date_picked" onfocus="(this.type='date')" onblur="(this.type='text')">

Насколько я знаю, работает во всех браузерах.

Источник
Другие вопросы по тегам