대화 상자에 jquery datepicker가 있습니다.

Question

대화 상자에 jquery datepicker를 사용하고 싶습니다. 초점에서 날짜 피커가 트리거되어야합니다 (기본값). 텍스트 상자는 대화 상자의 첫 번째 필드이기 때문에 자동으로 포커스가 있습니다. 대화 상자가 처음 열릴 때 datepicker를 여는 원치 않는 효과가 있습니다.

나는 dummy href로 포커스를 설정하고, 대화 상자가 열리면 datepicker ('close')를 호출하고 showOn을 'button'으로 설정 한 다음 대화 상자가 열리면 'focus'로 변경하는 등 여러 가지 작업을 시도했다. 그러나 아무 것도 작동하지 않습니다.

대화 상자가 먼저 열릴 때를 제외하고 텍스트 상자에 포커스가있는 경우에만 날짜 피커를 렌더링해야합니다.

내 조각

$(function() { 
    $('#btnDialog').click(function() { 
     $('#myDate').datepicker({ 
      title: 'Test Dialog' 
     }); 
     $('#myDialog').dialog(); 
    }); 
});​ 

JS 바이올린 링크 : http://jsfiddle.net/UkTQ8/

Answer 1

솔루션는 : 날짜 텍스트 상자 전에 더미 텍스트 상자 를 추가합니다.

데모 : http://jsfiddle.net/UkTQ8/4/

<div id="myDialog" title="Text Dialog"> 

<input type="text" id="dummyDate" /> <!-- dummy textbox --> 

<p>The textbox below should show the datepicker on focus, except for when the dialog opens.</p> 
Enter date: <input type="text" id="myDate" /> 
</div> 

Answer 2

오픈에 날짜 선택기를 만들고 가까운 그것을 파괴 :

$(function() { 
    $('#btnDialog').click(function() { 
     $('#myDialog').dialog({ 
      open: function() { 
       $('#myDate').datepicker({title:'Test Dialog'}).blur(); 
      }, 
      close: function() { 
       $('#myDate').datepicker('destroy'); 
      }, 
     }); 
    }); 
}); 

DEMO : http://jsfiddle.net/UkTQ8/7/

Answer 3

간단한 해결책은의 tabindex를 추가하는 것입니다 = "- 1"을 입력하십시오.

<input type="text" id="myDate" tabindex="-1" />