JQueryUIのDatePicker - JSからのトリガー表示

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

シンプル。クリックイベントが選択した要素でトリガーされたときはいつでも、datepickerメソッドを呼び出してください。

あなたはどちらの方法が datepicker

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

か、ちょうどあなたのJavaScriptでは、その後、あなたのマークアップにbuttonを追加

のあなたの最初の呼び出しにいくつかのオプションを追加することで、独自のボタンが表示されている可能性が

さらに読書のための

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

私は、最初にこの同様の質問 Using jQuery Date picker with a custom trigger button

Answer 3

あなたの日付ピッカーを作成する方法を参照してください。

$('#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> 

フィドル：その後、datepicker's show methodをトリガするために、ボタンのクリックイベントを使用https://jsfiddle.net/2kp8tcfc/1/