如何在HTML5 Datepicker触发onchange事件时用jQuery打开另一个Datepicker

HTML5原生的<input type="date">并没有提供直接调用打开日期选择器的API，但我们可以通过模拟用户点击操作来触发它的弹出，结合jQuery就能实现你的需求。

实现代码 #

确保页面已引入jQuery库后，添加以下代码：

<input type="date" id="datepicker" />
<input type="date" id="datepicker2" />

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
  // 监听#datepicker的change事件
  $('#datepicker').on('change', function() {
    // 触发#datepicker2的点击事件，唤起日期选择器
    $('#datepicker2').click();
  });
});
</script>

补充说明 #

• 部分浏览器出于安全或交互逻辑限制，可能会阻止脚本直接触发的点击事件，这时可以尝试先聚焦再触发点击：

  $('#datepicker2').focus().click();
  

• 该方案依赖浏览器对原生date输入框的支持，Chrome、Firefox、Edge等现代主流浏览器均可正常运行，IE浏览器不支持原生date输入框，需额外适配。

内容的提问来源于stack exchange，提问作者Trombone0904