2012-05-23 2 views
8

어쩌면 이것은 사소한 문제 일지 모르지만 누군가이 아이디어를 가지고 있는지 알고 싶습니다.입력란에 JQuery UI datepicker를 표시 하시겠습니까?

JQuery UI를 사용하고 있습니다. <input id="#myfield" type="text"> 필드가 있으며 $('#myfield').datepicker()으로 전화합니다. 필드에 포커스가있을 때마다 날짜 표시가 나타납니다. 그러나 입력란은 내 양식의 첫 번째 입력란이며 이미로드되었을 때 이미 포커스가 설정되어 있으므로 필드를 클릭해도 표시되지 않습니다. 또한 Esc 키를 사용하여 datepicker를 닫으면 같은 이유로 필드를 클릭하여 다시 열 수 없습니다. 이미 포커스가 있습니다.

은 내가 매개 변수 .datepicker({showOn: 'button'})을 설정할 수 있지만 버튼을 원하지 않는 것으로 알고 있습니다. 필드에 포커스가있을 때 데이트 피커를 표시하거나 이미 포커스가있을 때 클릭하는 방법이 있습니까? 이미 $('#myfield').click(function() { $(this).focus() }) 시도하고 입력 된 필드를 클릭 할 때 datepicker 올바르게 열리지 만 날짜를 선택할 때 필드에 나타나지 않습니다.

+1

나는 꽤 버튼과 같은, 그 꽤을 얼마나 멀리 왔는지입니다 그것을 사용하는 정상적인, 사실 나는 그것을 사용하지 않는 나쁜 결정을 말할 것입니다. – NimChimpsky

+0

일반적으로 나는 당신과 동의 할 것입니다. 내가 왜 버튼을 원하지 않는지에 대한 로한 부크 너의 대답을 아래에 적어주세요. – alexg

답변

17

는이

<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> 
+0

감사합니다. 시동시 datepicker를 열면 문제가 해결되고 절반은 문제를 해결합니다. 그것은 Esc 키를 눌러 경기장을 클릭하여 날짜 선택기를 다시 여는 방법의 문제가 해결되지 않는,하지만 난 더 나은 실제 버그를 해결하는 대신 사소한 문제를 가지고 노는 얻을 것입니다 :) – alexg

+0

@alexg 내가 업데이트 한 암호. 그것을 밖으로 확인 친구 –

+0

@RajanRawal : 답변 주셔서 감사합니다 친구는 내가 사용이 정확히 무엇인지,하지만 지금은 부트 스트랩 날짜 선택 도구를 사용하는 것을 고려하고 그 JQuery와 충돌하지 않도록 해달라고 지난 삼일 –

2

이 확률값은 늘 귀하의 질문에 대답하지만, 주위에 일을 할 수 날짜 선택 버튼을 가지고 있지의 문제는, 그 어떤 의미가 있다면 ... 날짜 선택 버튼을 가지고 관련이 있는지?

나는 내가 때문에 내 양식/페이지를 통해 탭 이동 사용자의 버튼을 가지고 싶어하지 않는 문제가 있고, 나는 버튼에 포커스가 싶지 않았다. (이상한 UI 경험)

그뿐만 아니라 당신의 경우라면 ... 당신은 언제나 다음과 같은 ... (그것은 또한 간접적으로 당신이 지금 발생하는 문제를 해결할 수 있습니다.)

을 수행하여 초점을 제거 할 수 있습니다 페이지의 첫 번째 필드는 IT가로드 버튼없이 폐쇄해야하고, 사용자가 클릭에서만 열 수 :
$('#field').datepicker({ 
     showOn: 'button', 
     buttonImage: "/image_path/image.png", 
}).next('img.ui-datepicker-trigger').attr('tabIndex', "-1"); 
+1

고마워요. 사실 버튼을 원하지 않는 이유는 일관성 때문입니다. 내 애플 리케이션에서 또한 jqGrid 날짜 단추와 추한 및 귀중한 화면 너비를 걸릴 것이라고, 그래서 내 눈금 필드 내 눈금 필드를 비슷하게 내 데이트 필드 원하는. 나는 당신의 대답을 upvoting 해요. – alexg

1

나는 비슷한 시나리오를했다보십시오. 그러나 그것은 닫힌 '검색 표시 줄'구성 요소에 있었으므로 기본 동작을 변경하는 것은 옵션이 아닙니다. 여기 내 해결 방법입니다 :

$(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'); 
      }); 
     }); 
    }); 

, 아니 꽤 완벽하지 달력 페이지로드의 탑승객 중에 플래시,하지만 내가

0
$("#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); 
관련 문제