1

テキストボックスなしでjQuery UI datepickerを使用することは可能ですか? クリックするとカレンダーコントロールが表示されるカレンダーアイコンが欲しいだけです。次に、日付が選択されると、コントロールが消えます。次に、選択した日付をキャプチャして、それを自分の JavaScript 関数に渡したいだけです。

スパンと div で使用してみましたが、動作がすべて間違っています。ユーザーが日付を選択しても非表示になりません。一部の人が示唆しているように非表示フィールドにアタッチすると、日付ピッカーを起動できません。

4

4 に答える 4

6

これが私が持っている解決策です。

フィドル:

http://jsfiddle.net/qphza/1/

// Set up datepicker toggle functionality

$("#datepicker").hide();

$("#buttonHere").click(function(){

    $("#datepicker").toggle();
}); 

$("#datepicker").datepicker({ 
      onSelect: function(value, date) { 
         alert('The chosen date is ' + value); 

         // Hide the datepicker div when something is selected

         $("#datepicker").hide(); 
      } 
});

ここにHTMLがあります

<button id = "buttonHere">Click to show datepicker</button>

<div id = "datepicker"></div>
于 2013-05-10T22:33:18.680 に答える
1

クラッジを使用する必要がありましたが、機能するようになりました。ここにjQueryがあります。

  $(function() {
    $( "#datepicker" ).datepicker({
      showOn: "button",
      buttonImage: "btn_calendar.gif",
      buttonImageOnly: true,
      onSelect:function(selectedDate){
                alert(selectedDate);
       }
    });
  });

ここにHTMLがあります。

<input type="text" id="datepicker" size="1" readonly style="outline: none; color: #FFFFFF; border: 0px solid #000000;"/>

基本的に、テキストボックスを実際に「隠す」ことなく、非表示にして読み取り専用にしました。しかし、動作は機能します。目に見えるテキストボックスなしで日付ピッカーを取得する唯一の方法のようです。

于 2013-05-10T22:53:06.823 に答える
0

日付ピッカーを非表示の入力に割り当ててから、選択した日付をラベルなどに必要なものに割り当てることができます。

$('#hiddenInput').datepicker({
    showOn: 'button',
    buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',
    buttonImageOnly: true,
    onSelect: function (selectedDate) {
        $('#calendarDay').text(selectedDate);
        $('#hiddenInput').datepicker('destroy');
    }
});

これは、次のことを示す jsFiddle です。

http://jsfiddle.net/pxeFM/8/

于 2013-05-10T22:35:51.720 に答える
0

「ShowOn」オプションを使用して、アイコンで日付ピッカーを使用できます。

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

    });
  });

また、「onSelect」オプションを使用して、選択した日付を JavaScript 関数に渡すこともできます。

于 2013-05-10T22:24:42.130 に答える