2013-03-13 2 views
5

JQuery UI를 사용하는 앱이 있습니다. 이 앱은 대화 상자를 열고 두 개의 날짜 선택 도구를 표시해야합니다. 현재 대화가 작동 중입니다. 두 날짜 선택기도 있습니다. 내 문제는 : a) 날짜 선택 도구의 기본 날짜가 표시되지 않고 b) 대화 상자를 열면 "날짜"선택 도구가 자동으로 열립니다. 다음은 대화와 날짜 선택기를 초기화 내 코드는 다음과 같습니다jquery datepicker가 자동으로 열림 (하지만 그렇지 않아야 함)

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

내가 잘못 뭐하는 거지 :

여기
<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 
     } 
    });  
}); 

나는 대화 상자를 엽니 다 사용하는 코드는?

감사합니다.

답변

8

문제는 대화 상자를 열 때 포커스가 날짜 컨트롤로 설정되어있어서 날짜 피커가 열리는 문제입니다.

하나의 가능한 솔루션은 tabIndex=1에 데이터 컨트롤 이외의 요소를 할당하는 것입니다.

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

데모 : Fiddle

입력 컨트롤의 기본 날짜를 설정하지 않습니다 defaultDate property, 그냥 팝업에서 날짜를 선택합니다. datepicker 팝업을 보면 set defaultDate가 강조 표시되어 있습니다.

+0

왜 기본값이 설정되지 않습니까? 그 기괴한. –

+0

@EelsFan 업데이트보기 –

2

datepicker 구성 요소를 초기화 한 후에 close() 메서드를 호출 해보십시오.

$("#fromOtherDateTextBox").datepicker({ /* ... */}).close(); 
관련 문제