JQueryUI的DatePicker-觸發從JS顯示

Question

當我單擊某個按鈕時，我想讓日期選擇器顯示。

使用官方用法示例，我已經成功創建了一個示例日期選擇器對象，並在用戶單擊日期選擇器的文本框時使用以下代碼顯示該對象：

<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")
    });
});

小提琴演示

Answer 2

簡單。 只要在您選擇的元素上觸發了click事件，就只需調用datepicker方法。

通過在第一次調用datepicker添加一些選項，您可以使方法顯示自己的按鈕

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

或者，只需在您的標記中添加一個button ，然后在您的javascript中

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

為了進一步閱讀，我為您介紹了類似的問題， 使用帶有自定義觸發按鈕的jQuery日期選擇器

Answer 3

首先創建日期選擇器，然后使用按鈕的click事件觸發日期選擇器的show方法 ：

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

jsFiddle示例

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/