是否有 JavaScript 方法可以使 html 日期输入显示日期选择器? [英] Is there a JavaScript method to make a html date input display the datepicker?

问题描述

我想从外部按钮触发日期输入的日期选择器的显示.

I would like to trigger the display of a date input's date-picker from an external button.

<input id="date" type="date" />
<button>display date</button>

例如，如果我有上面的代码，我将如何通过单击按钮显示日期选择器(出现并允许您选择日期的框)?我不想使用 jQuery 或其他库.有没有办法用 vanilla JavaScript 从外部触发器显示本机日期选择器?

For instance if I had the above code, how would I show the date-picker (the box which appears and allows you to pick a date) by clicking the button? I do not want to use jQuery or other libraries. Is there a way to show the native date-picker from an external trigger with vanilla JavaScript?

我正在寻找这样的东西:

I'm looking for something like this:

var button = document.querySelector("button");
button.onclick = () => {
    var input = document.querySelector("#date");
    input.showDatePicker();
}

推荐答案

这在 firefox 和 edge 上运行良好:

This works well on firefox and edge :

<input id="date" type="date" />
<button>display date</button>
<script type="text/javascript">
	var button = document.querySelector("button");
button.onclick = () => {
    var input = document.querySelector("#date");
    input.focus()
    input.click()
}
</script>

这篇关于是否有 JavaScript 方法可以使 html 日期输入显示日期选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！