web-dev-qa-db-ja.com

入力フィールドのクリックでJQueryUIの日付ピッカーを表示しますか？

ささいな問題かもしれませんが、誰かがこれについて何かアイデアを持っているかどうかを確認することに非常に興味があります。

JQueryUIを使用しています。 _<input id="#myfield" type="text">_フィールドがあり、$('#myfield').datepicker()を呼び出します。日付ピッカーは、フィールドがフォーカスされるたびに表示されます。しかし、フィールドは私のフォームの最初のものであり、ロード時にすでにフォーカスされているため、フィールドをクリックしても表示されません。また、Escキーを使用して日付ピッカーを閉じると、同じ理由で、フィールドをクリックして日付ピッカーを再度開くことができなくなります。すでにフォーカスがあります。

パラメータ.datepicker({showOn: 'button'})を設定できることは承知していますが、ボタンは必要ありません。フィールドがフォーカスされたときに日付ピッカーを表示する方法はありますかORすでにフォーカスされているときにクリックされますか？すでに$('#myfield').click( function () { $(this).focus() } )を試しましたが、日付ピッカーが正しく開くようになりました入力フィールドをクリックしますが、日付を選択してもフィールドに表示されません。

jqueryjquery-uifocusdatepickerjquery-ui-datepicker
8
alexg

これを試して

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#date1').datepicker();

$('#date1').focus(function(){
    $('#date1').datepicker('show');
});

$('#date1').click(function(){
    $('#date1').datepicker('show');
});
//$('#ui-datepicker-div').show();
$('#date1').datepicker('show');
});
</script>
</head>
<body>
<input type="text" name="date1" id='date1'>
</body>
</html>
17
Rajan Rawal

この確率はあなたの質問に答えませんが、日付ピッカーボタンがないという問題が日付ピッカーボタンがあることに関連している場合は、回避策になる可能性があります...それが意味がある場合は？

ユーザーがフォーム/ページをタブで移動するためにボタンを表示したくないという問題があり、ボタンにフォーカスを設定したくありませんでした。 （奇妙なUI体験）

それがあなたの場合でもあるなら...あなたはいつでも次のことをすることによってその焦点を取り除くことができます..（それはまたあなたが今抱えている問題を間接的に解決します。）

$('#field').datepicker({
      showOn: 'button',
      buttonImage: "/image_path/image.png",
 }).next('img.ui-datepicker-trigger').attr('tabIndex', "-1");
2
Rohan Büchner

同様のシナリオがありました。ページの最初のフィールドは、ボタンなしで閉じて読み込まれ、ユーザーがクリックしたときにのみ開く必要があります。しかし、それは閉じた「検索バー」コンポーネントにあったため、デフォルトの動作を変更することはできませんでした。これが私の回避策です：

$(document).ready(function () {
        //getting the controls on the form context
        var calendarios = $('.calendarBox', "#frmOccurrencesHistory");
        //set an invalid option - avoid open on focus and show the buttons
        calendarios.datepicker("option", "showOn", "click");
        //handle click button
        calendarios.each(function () {
            $(this).click(function () {
                $(this).datepicker('show');
            });
        });
    });

きれいではなく、完璧ではありません。ページが読み込まれるとカレンダーが点滅しますが、それが私が到達した距離です。

1
Alexandre
 $("#datepicker").datepicker({
   dateFormat:'dd/M/yy',
   minDate: 'now',
   changeMonth:true,
   changeYear:true,
   showOn: "focus",
   //buttonImage: "YourImage",
   buttonImageOnly: true, 
   yearRange: "-100:+0",  
}); 

  $( "datepicker" ).datepicker( "option", "disabled", true );
0
Girish