년 문제가없는 JQuery Datepicker minDate 및 maxDate 세트 사용

Question

날짜 및 월을 선택할 수있는 JQuery 날짜 표시기가 있습니다. 그 해는 숨겨져 있습니다.

날짜 픽커 설정에 minDate 및 maxDate을 추가하는 경우를 제외하고 모두 정상적으로 작동합니다.

내가 이것을 설정 한 이유는 수년을 바꿀 수 없기 때문에 윤년을 허용하기를 원합니다. 그래서 저는 2 월 29 일을 선택할 수 있도록 최소 및 최대 날짜를 2012 년 (마지막 윤년)으로 설정했습니다.

날짜 텍스트 상자를 클릭하면 4 월 23 일이 설정된 날짜에도 12 월 31 일이 선택됩니다. minDate과 maxDate을 제거하면 바로 날짜 텍스트 상자를 선택할 때 4 월 23 일을 선택합니다.

JSFiddle (minDate없이 maxDate) (minDate 및 maxDate와)

• JSFiddle

이 버그인가, 아니면 내가 이것을 바로 잡기 위해 할 수있는 일이 무엇입니까?

내 코드 :

$('#date').datepicker({ 
    altField: '#date_alt', 
    altFormat: 'mm-dd', 
    changeMonth: true, 
    changeYear: false, 
    dateFormat: 'MM d', 
    showAnim: 'slideDown', 
    yearRange: '-100:+0', 
    minDate: new Date(2012, 1-1, 1), 
    maxDate: new Date(2012, 12-1, 31), 
    beforeShow: function(el, obj) { 
     obj.dpDiv.addClass('datepicker_hideyear'); 
    }, 
    onClose: function(el, obj){ 
     setTimeout(function() { obj.dpDiv.removeClass('datepicker_hideyear'); }, 1000); 
    } 
}); 

---

UPDATE :

2012 년 날짜가 트릭을 수행하지만, 날짜 선택기의 값을 설정하지 않는 defaultDate에 설정. 2012 년 4 월 23 일과 기본 날짜 만로드됩니다.

defaultDate: new Date('04/23/2012'), 

나는 2012 4월 23일 "선택"을 setDate를 사용해야하고 세트는 값이지만 정확히 같은 결과로 끝납니다.

$('#date').datepicker('setDate', new Date('04/23/2012')); 

JSFiddle.

Answer 1

입력에 값을 추가 할 때 1 년을 지정하지 않는 것이 문제입니다. beforeShow에 경고를 추가하면 실제로는 2014가 표시됩니다 (alert($(this).datepicker("getDate"));). 올해가 현재 범위를 벗어 났으므로 가능한 최대 날짜가 기본값입니다.

입력에서 값을 제거하고 이 jQueryUI 버그처럼 보이는, 좀 더 파고 후

defaultDate: new Date(2012, 4-1, 23), 

그렇지 않으면 :

<input type="text" name="date" id="date" /> 

하고 날짜 선택기 초기화 추가의 : 기본 날짜가 제대로이 일을 할 것입니다. dateformat st에서 연도 형식 지정 반지, 그것은 상관없이 현재 연도 기본값으로 설정됩니다. 그래서 setdate가 실패합니다.updated fiddle

가 여기에 내가이 기본적으로 사용자에게 정보를 표시하는 자리를 만드는

<div style="position:relative; display: inline-block;"> 
    <input type="text" id="date-placeholder" value="" /> 
    <input type="text" name="date" id="date" value="" style="visibility:hidden; position:absolute; left:0;" /> 
</div> 

추가 작업은 다음과 같습니다 여기

하지만 해결 방법입니다. "#date"입력은 visibility : hidden으로 설정되고 자리 표시 자 위에 절대적으로 배치됩니다 (날짜 표시기가 있어야하는 곳에 팝업되도록). 나는 display : none을 설정하지 않았다. 왜냐하면 datepicker가 작동하지 않기 때문에 none이지만 jquery는 여전히 가시성을 고려한다. 그런 다음 자바 스크립트

, I 설정 새로운 이벤트 : 사용자가 텍스트 상자를 클릭 할 때

$("#date-placeholder").click(function() { 
    $("#date").datepicker("show"); 
}); 

이는 수동으로 날짜 선택기를 보여줍니다. 그런 다음, 날짜 선택기의으로 onClose 이벤트 :

onClose: function (el, obj) { 
      setTimeout(function() { 
       obj.dpDiv.removeClass('datepicker_hideyear'); 
      }, 1000); 
      var val = $("#date").val(); 
      val = val.substr(0, val.length - 4); 
      $("#date-placeholder").val(val); 
     } 

는 단순히 날짜 필드의 현재 값을 얻고, 마지막 4 자 (년)을 제거하고 그 값으로 자리를 설정합니다.

또한 초기화 할 때 dateFormat 문자열을 변경해야합니다. 이것은 통제가 제대로 설정 될 수있는 한 해가되도록하기위한 것입니다.

dateFormat: 'MM d yy', 

코드는 수정 될 수 있지만 바이올린을 보면 어떻게 작동하는지 확인할 수 있습니다.

Answer 2

입력에 값을 사용하는 대신 datepicker 메서드의 defaultDate 속성을 사용할 수 있습니까?

$('#date').datepicker({ 
    defaultDate: new Date('04/23/2012'); 
    altField: '#date_alt', 
    altFormat: 'mm-dd', 
    changeMonth: true, 
    changeYear: false, 
    dateFormat: 'MM d', 
    showAnim: 'slideDown', 
    yearRange: '-100:+0', 
    minDate: new Date(2012, 1-1, 1), 
    maxDate: new Date(2012, 12-1, 31), 
    beforeShow: function(el, obj) { 
     obj.dpDiv.addClass('datepicker_hideyear'); 
    }, 
    onClose: function(el, obj){ 
     setTimeout(function() { obj.dpDiv.removeClass('datepicker_hideyear'); }, 1000); 
    } 
});