是否有JavaScript方法使html日期输入显示datepicker?

时间:2018-03-03 19:23:26

标签: javascript html5 datepicker

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

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

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

我正在寻找类似的东西:

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

2 个答案:

答案 0 :(得分:1)

你可以用

let x = document.getElementById('myDate'),
  d = new Date(),
  m = d.getMonth() < 10 ? `0${d.getMonth()}` : `${d.getMonth()}`,
  day = d.getDay() < 10 ? `0${d.getDay()}` : `${d.getDay()}`;

x.value = d.getFullYear() + "-" + m + "-" + day;

Demo

答案 1 :(得分:1)

这适用于firefox和edge:

&#13;
&#13;
<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>
&#13;
&#13;
&#13;