当 input[type="date"] 成为焦点时如何显示日历弹出窗口答案

【问题标题】：How to show calendar popup when input[type="date"] is on focus当 input[type="date"] 成为焦点时如何显示日历弹出窗口
【发布时间】：2018-07-14 03:22:44
【问题描述】：

有没有办法在输入元素的焦点上激活原生 HTML5 日期选择器下拉菜单？

大型输入元素：

目前我只能通过单击输入元素最右侧的箭头来使用日历。

箭头的大输入元素点击

我想在输入元素的焦点上激活这个日历。

这是有问题的代码。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <style media="screen">
  .form-question {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 0 3rem;
    min-height: 3rem;
  }
  .form-question__title {
    color: #342357;
    font-size: 1.5rem;
    padding: 1rem;
  }
  .input-container {
    border-bottom: solid 2px #333333;
  }
  .input-container input {
    border: none;
    box-sizing: border-box;
    outline: 0;
    padding: .75rem;
    width: 100%;
  }
  </style>
  <body>
    <div class="form-question">
      <div class="form-question__title">
        <span>Effective Date</span>
      </div>
      <div class="input-container">
        <input id="effective-date" type="date" name="effective-date" minlength="1" maxlength="64" placeholder=" " autocomplete="nope" required="required"></input>
        <span class="bar"></span>
      </div>
    </div>
  </body>
</html>

首选 CSS 解决方案，但欢迎使用 javascript，请不要使用 jQuery。

提前致谢！

【问题讨论】：

目前还没有浏览器公开 API 用于在原生 input[type="date"] 上设置样式或操作日历。另外，请注意一些较旧的浏览器（例如 IE）没有本机日期选择器，并且会回退到纯文本输入。移动浏览器也可能有不同的 UI（例如，如果您在 iOS 上默认展开日历，它可能会占据整个屏幕）。所以我建议你要么把默认的日历行为留给浏览器，要么使用一些第三方的日期时间选择器。
@evenstar 感谢您的澄清！我确实找到了this，这基本上是同一个问题并且确实解决了我的问题（至少在 Chrome 上）。只需将日历选择器图标设置为输入的完整高度和宽度！

标签： javascript html css

【解决方案1】：

对于任何偶然发现此问题的人，我通过将 calendar-picker-indicator 设置为输入的完整高度和宽度来解决它（~~仅限 webkit~~firefox 似乎也尊重这一点），如 here 所述.

.input-container input {
    border: none;
    box-sizing: border-box;
    outline: 0;
    padding: .75rem;
    position: relative;
    width: 100%;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

&lt;input type="date"&gt;

Full-Width Clickable Calendar Dropdown

【讨论】：

使用此功能的任何人请注意 - 您将无法使用此功能清除、增加和减少日期字段。 linked answer 有一些额外的样式允许这样做。
这会禁用键盘输入任何原因??
@AravindReddy 我无法复制该问题。我可以通过 mm/dd/yyyy 制表符/移位制表符并在其中输入任意数字。此外，当日期选择器打开时，我可以使用箭头键在日期周围移动。也许您可以提出一个问题，详细说明您对代码示例的体验并将其链接到此处。

【解决方案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;
    }

【讨论】：

【解决方案3】：

为什么不用js来做呢

const inputDate = document.getElementById("inputId");

inputDate.addEventListener("focus",function (evt) {
  if (this.getAttribute("type")==="date") {
    this.showPicker();
  }
});

【讨论】：

我不熟悉showPicker。根据MDN 兼容性很差。