2013-03-13 9 views
5

私はJQuery UIを使用しているアプリケーションを持っています。このアプリは、ダイアログを開き、2つの日付ピッカーを表示する必要があります。現在、私はダイアログが働いています。私はまた2つの日付ピッカーを持っています。私の問題は次のとおりです。a)日付ピッカーのデフォルトの日付が表示されていない。b)ダイアログを開くと、「日付」ピッカーが自動的に開きます。ここでは、ダイアログや日付ピッカーを初期化し、私のコードは次のとおりです。ここでjquery datepickerが自動的に開きます(ただし、そうしないでください)

<div id="myDialog" title="Other Date Range" style="display:none;"> 
    <table border="0"> 
     <tr> 
      <td>From</td> 
      <td></td> 
      <td>To</td> 
     </tr> 
     <tr> 
      <td><input id="fromOtherDateTextBox" style="width:140px;" /></td> 
      <td>&nbsp;-&nbsp;</td> 
      <td><input id="toOtherDateTextBox" style="width:140px;" /></td> 
     </tr> 
     <tr> 
      <td>mm/dd/yyyy</td> 
      <td></td> 
      <td>mm/dd/yyyy</td> 
     </tr> 
    </table> 
</div> 

$(document).ready(function() { 
    $("#fromOtherDateTextBox").datepicker({   
     defaultDate: "-1d", 
     maxDate: 0, 
     minDate: new Date(2000, 1, 1) 
    }); 

    $("#toOtherDateTextBox").datepicker({   
     defaultDate: "0d", 
     maxDate: 0, 
     minDate: new Date(2000, 1, 1) 
    }); 

    $("#myDialog").dialog({ 
     autoOpen: false, modal: true, 
     show: "fade", hide: "fade", 
     height:220, width:350, 
     buttons: { 
      'Cancel': function() { $(this).dialog('close'); }, 
      'View': useOtherDate_Click 
     } 
    });  
}); 

は、私は、ダイアログを開くために使用したコードは次のとおりです。私は間違っ

$("#myDialog").dialog("open"); 

何をしているのですか?

ありがとうございました!

答えて

8

問題は、ダイアログが開いてフォーカスが日付コントロールに設定されているために、日付ピッカーが開きます。

可能な解決策の1つは、tabIndex=1にデータコントロール以外の要素を割り当てることです。

<div id="myDialog" title="Other Date Range" style="display:none;"> 
    <table border="0" tabIndex="1"> 

デモ:Fiddle

入力コントロールのデフォルトの日付を設定しませんdefaultDate property、それだけでポップアップで日付を強調表示します。 datepickerポップアップを見ると、defaultDateが強調表示されていることがわかります。

+0

なぜデフォルト値は設定されていませんか?それはとても奇妙です。 –

+0

@EelsFanアップデートを見る –

2

datepickerコンポーネントの初期化後にclose()メソッドを呼び出してみてください。

$("#fromOtherDateTextBox").datepicker({ /* ... */}).close(); 
関連する問題