Question

当我点击某个按钮时，我想让日期选择器显示出来。

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

<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按需触发它？

Answer 1

show() ：打开日期选择器。

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

<强> Fiddle Demo

Answer 2

简单。只要在您选择的元素上触发click事件，就可以调用datepicker方法。

您可以让方法显示自己的按钮，方法是在第一次调用datepicker时添加一些选项

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

或者，只需在您的标记中添加button，然后在您的javascript中

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

如需进一步阅读，请参阅此类似问题Using jQuery Date picker with a custom trigger button

Answer 3

首先创建你的日期选择器，然后使用按钮的点击事件来触发datepicker's show method：

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

<强> jsFiddle example

Answer 4

<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/

JQueryUI的DatePicker - 从JS中触发显示

4 个答案: