如何通过Javascript显示chrome的日期选择器[重复]

Question

我正在尝试使用input[type='date'] 和类似于以下代码的东西制作自定义日期选择器：

#dpk{
  display: none;
}
label{
  border: 1px solid black;
  padding: .2em .3em;
  cursor: pointer;
}

<div class='input'>
  <label for="dpk">Chose a date</label>
  <input type='date' id='dpk'/>
</div>

对于所有类型的输入，单击标签（如果“for”属性设置正确）将自动触发对输入的单击。我们可以使用这种技术来定制input[type='file']，正如this answer 和jsfiddle 所解释的那样。

我对日期输入的预期输出是单击标签将显示日期选择器，它在 Firefox 上运行良好，但在 Chrome 和 Edge 中没有任何作用。如果您使用 Firefox，则上面的代码 sn-p 将在您单击文本时显示一个日期选择器，但如果您使用的是 Edge 或 Chrome，则不会显示任何内容。

这是我认为导致问题的原因： 在 Firefox 中，日期输入如下所示

但在 Chrome 和 Edge 中它们看起来像这样

在 Firefox 中，单击输入的任何区域都会触发日期选择器显示（而用户也可以手动键入日期），但在另外两个中，必须单击日历图标，因为单击其他地方只会让我们编辑日期作为文本输入。

所以我的问题是：有没有办法使用 JavaScript（或 HTML 和 CSS）来完成这项工作？

document.querySelector('input[type="date"').click() 在这里不起作用，原因我在上面解释过。

提前致谢。

Answer 1

您可以简单地使用 jquery CDN。

$(function() {
  $("#dpk").datepicker();
});

#dpk {
  border: 1px solid black;
  padding: .2em .3em;
  cursor: pointer;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class='input'>
  <input type='text' value="Chose a date" id='dpk' />
</div>