JQueryUI的DatePicker - 触发显示来自JS

JQueryUI's DatePicker - triggering show up from JS

本文关键字：显示 JS DatePicker JQueryUI      更新时间：2023-09-26

我想让日期选择器在我单击某个按钮时显示。

使用官方用法示例，我已经成功地创建了一个示例日期选择器对象，并在用户单击日期选择器的文本框时显示它，使用以下代码：

<p>Date: <input type="text" id="datepicker"></p>
<script>
$(function() {
    $( "#datepicker" ).datepicker();
});
</script>

但是我想单击某个按钮来触发日期选择器。我尝试了类似的东西：

<button type="button" onclick = "showDatePicker()">click me</button>
<script>
function showDatePicker() {
    document.getElementById('datepicker').datepicker();
}
</script>

但是，它根本不起作用。

有没有办法按需从JS触发它？

show（）：打开日期选择器。 

$(document).ready(function(){
    $( "#datepicker" ).datepicker();
    $("button").click(function(){
        $("#datepicker").datepicker("show")
    });
});

小提琴演示

很简单。只需在所选元素上触发 click 事件时调用 datepicker 方法即可。

您可以通过向第一次调用添加一些选项来让该方法显示自己的按钮datepicker 

$("#datepicker").datepicker({
  showOn: 'button',
  buttonImage: 'images/calendar.gif',
  buttonImageOnly: true
});

或者，只需在标记中添加一个button，然后在JavaScript中

$("#myButton").click(function() {
  $("#datepicker").datepicker("show");
});

为了进一步阅读，我建议你参考这个类似的问题 使用带有自定义触发器按钮的 jQuery 日期选择器

首先创建日期选取器，然后使用按钮的单击事件触发日期选取器的 show 方法：

$('#datepicker').datepicker();
$('button').click(function() {
  $('#datepicker').datepicker('show');
})

js小提琴示例

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<button id="bar" type="button">click me</button>
<p>Date: <input type="text" id="datepicker"></p>
<script>
//edit, forgot this
   $('#datepicker').datepicker();
   $('#bar').on('click',function(){
        $('#datepicker').datepicker("show");
   });
</script>

小提琴：https://jsfiddle.net/2kp8tcfc/1/

相关文章：