当输入[type =“ date”]成为焦点时如何显示日历弹出窗口

Question

当输入[type =“ date”]成为焦点时如何显示日历弹出窗口

MJ1*_*358 7 html javascript css

有没有一种方法可以在输入元素的焦点上激活本地HTML5日期选择器下拉菜单？

大型输入元素：

大输入[类型=日期]元素

目前，我只能在输入元素最右边的箭头上单击才能使用日历。

大型输入元素单击箭头

大输入[type = date]元素onClick的箭头

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

这是有问题的代码。

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

Run Code Online (Sandbox Code Playgroud)

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

提前致谢！

Answer 1

Abi*_*iry 66

使用showPicker的一行解决方案

<input type="date" onfocus="this.showPicker()">

Run Code Online (Sandbox Code Playgroud)

也适用于“time”和“datetime-local”类型

Answer 2

MJ1*_*358 21

对于任何人谁碰到这个跌倒，我解决了这个问题（~~webkit的只有~~火狐似乎也尊重这个）通过将calendar-picker-indicator输入的整个高度和宽度，概述这里。

.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;
}

Run Code Online (Sandbox Code Playgroud)

<input type="date">

Run Code Online (Sandbox Code Playgroud)

全宽可点击日历下拉菜单

使用此功能的任何人请注意 - 您将无法使用此功能清除、递增和递减日期字段。[链接的答案](/sf/answers/3182319661/) 有一些额外的样式可以实现这一点。 (5认同)

归档时间：	7 年，6 月前
查看次数：	7542 次
最近记录：	6 年，9 月前