在Chrome中显示原生日期选择器的方法

Question

<input type="date">当浏览器不支持该字段时,我使用优雅地回退到jQuery的字段.最近,Chrome开始提供原生日期选择器,这很棒.但是我发现许多用户错过了调出日历的小箭头,因此错过了日期选择的简单日历这一事实.

为了使这更直观,如果我可以在用户将焦点移动到输入或单击另一个元素(如小日历图标)时调出本机日期选择器UI,那就太棒了.

我可以在Chrome中使用哪种方法来触发datepicker UI吗？

Answer 1

这是一种在用户点击字段本身时触发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">

链接:

• 符号列表
• 带有font-awesome图标的codepen示例

Answer 2

我不认为您可以触发显示的本机日历控件,但您可以更多地突出显示它:

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

也许这可以被扭转并显示日期选择器,但问问自己,每当你在页面上漫游鼠标时,你是否希望每个日历控件都飞出来？

这个答案也有帮助:

/sf/answers/1057495141/

Answer 3

2020 年编辑：似乎 chrome 发生了变化，以前的答案不再有效。

我做了一个 hacky 解决方法，您可以根据自己的需要进行调整。

这种新方法增加了日历图标的大小以使其溢出它的输入容器以完全覆盖它。您可以通过调整这些参数来调整位置和大小：

  top: -150%;
  left: -150%;
  width: 300%;
  height: 300%;

越大越稳定。但仍然是黑客之上的黑客

2020 年 7 月更新 - 适用于新的 Chrome 日历选择器

label {
  display: inline-block;
  position: relative;
  line-height: 0;
}
input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  cursor: pointer;
}
input::-webkit-calendar-picker-indicator {
  position: absolute;
  top: -150%;
  left: -150%;
  width: 300%;
  height: 300%;
  cursor: pointer;
}
input:hover + button {
  background-color: silver;
}

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

There's still an issue in Firefox, when a date is selected and you click near the right border, the input will clear, because the input's clear button is right there.

我调整了cinatic的解决方案，使其适用于Chrome，并根据2020年Chrome最近的变化调整了Andy的技巧

安迪的技巧：在整个输入中扩展 Chrome 的日期选择器的箭头

cinatic 的解决方案：将输入隐藏在另一个元素之上

Answer 4

Chrome 99+添加了该showPicker()方法： https://chromestatus.com/feature/5692248021794816

完整文档和跨浏览器兼容性网格：https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker

用法示例：

<input type="date" onfocus="'showPicker' in this && this.showPicker()"/>

Answer 5

诀窍是F4在input元素上触发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,日历弹出窗口将显示在当前选项卡上.它已经报道了.

Answer 6

参考安迪的回答，我让整个区域都可以点击并删除了日历图标。

Andy 代码段中的结果在左侧有一个不可点击的小区域。（铬 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">

Answer 7

对于桌面（和移动），将输入放置在具有相对定位和图标的 div 中，输入样式如下：

input {
  position: absolute;
  opacity: 0;

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

这会在整个父 div 上拉伸选择器指示器，以便在您点击父 div 的图标和/或文本时始终显示日期控件。

Answer 8

2021 Firefox / Chrome 更新Madacol回复。

受到其他回复的启发，我进一步推动了Madacol 的解决方案，以消除当您单击按钮右侧（重置输入）时在 Firefox 下的不良行为。这里是。

.datepicker{
  display: inline-flex;
  position: relative;
  overflow: clip;
}
.datepicker:focus-within {
    outline: black auto 2px;
}
.datepicker > input[type=date] {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  opacity: 0;
    cursor:pointer;
}
.datepicker > input[type=date]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: -150%;
  left: -150%;
  width: 300%;
  height: 300%;
  cursor: pointer;
}

<!-- Tested on 2021-09 under latest chrome and firefox -->
<label class="datepicker">
  
  <input type="date" value="2021-09-30" />  
</label>