jQuery UI : Datepicker에서 연도 범위를 100 년으로 설정

Datepicker를 사용하면 기본적으로 연도 드롭 다운에 10 년만 표시됩니다. 더 많은 년을 추가하려면 사용자가 작년을 클릭해야합니다.

사용자가 기본적으로 큰 목록을 볼 수 있도록 초기 범위를 100 년으로 설정하는 방법은 무엇입니까?

    function InitDatePickers() {
        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            maxDate: '@maxDate',
            minDate: '@minDate'
        });
    }

http://api.jqueryui.com/datepicker/#option-yearRange 설명서에서이 옵션을 사용하여 연도 범위를 설정할 수 있습니다.

yearRange: '1950:2013', // specifying a hard coded year range

이 방법으로

yearRange: "-100:+0", // last hundred years

문서에서

기본값 : "c-10 : c + 10"

연도 드롭 다운에 표시되는 연도 범위 : 오늘 선택한 연도 ( "-nn : + nn"), 현재 선택한 연도 ( "c-nn : c + nn"), 절대 ( "nnnn : nnnn ") 또는 이러한 형식의 조합 ("nnnn : -nn ")입니다. 이 옵션은 드롭 다운에 나타나는 내용에만 영향을 미치며 minDate 및 / 또는 maxDate 옵션을 사용하여 선택할 수있는 날짜를 제한합니다.

이것은 나를 위해 완벽하게 작동했습니다.

ChangeYear :-true로 설정하면 현재 달의 달력에 표시된 이전 또는 다음 달의 셀을 선택할 수 있음을 나타냅니다. 이 옵션은 options.showOtherMonths가 true로 설정되어 사용됩니다.

YearRange :- 연도 드롭 다운에서 연도 범위를 지정합니다. (기본값 :“-10 : +10 ″)

예:-

$(document).ready(function() {
    $("#date").datepicker({
    changeYear:true,
    yearRange: "2005:2015"
    });
});

참조 : -jquery datepicker에서 연도 범위 설정

나는 이걸했다:

var dateToday = new Date();
var yrRange = dateToday.getFullYear() + ":" + (dateToday.getFullYear() + 50);
and then
yearRange : yrRange

50현재 연도의 범위는 어디 입니까?

jQuery UI datepicker에서이 옵션을 사용하여 연도 범위를 설정할 수 있습니다.

yearRange: "c-100:c+0", // last hundred years and current years

yearRange: "c-100:c+100", // last hundred years and future hundred years

yearRange: "c-10:c+10", // last ten years and future ten years

이것은 원래 질문이 얼마나 오래 게시되었는지를 감안할 때 이것을 제안하는 데 약간 늦었지만 이것이 내가 한 일입니다.

나는 70 년의 범위가 필요했지만, 100 년은 아니지만 방문자가 스크롤하기에는 여전히 너무 많은 년입니다. (jQuery는 그룹 단위로 단계적으로 진행되지만, 대부분의 사람들이 파투시에 어려움을 겪고 있습니다.)

첫 번째 단계는 datepicker 위젯의 JavaScript를 수정하는 것이 었습니다. jquery-ui.js 또는 jquery-ui-min.js에서이 코드를 찾으십시오 (최소화 된 위치).

for (a.yearshtml+='<select class="ui-datepicker-year" onchange="DP_jQuery_'+y+".datepicker._selectMonthYear('#"+
a.id+"', this, 'Y');\" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+a.id+"');\">";b<=g;b++)
 a.yearshtml+='<option value="'+b+'"'+(b==c?' selected="selected"':"")+">"+b+"</option>";
a.yearshtml+="</select>";

그리고 이것을 다음과 같이 바꾸십시오 :

a.yearshtml+='<select class="ui-datepicker-year" onchange="DP_jQuery_'+y+
 ".datepicker._selectMonthYear('#"+a.id+"', this, 'Y');
 \" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+a.id+"');
 \">";
for(opg=-1;b<=g;b++) {
    a.yearshtml+=((b%10)==0 || opg==-1 ?
        (opg==1 ? (opg=0, '</optgroup>') : '')+
        (b<(g-10) ? (opg=1, '<optgroup label="'+b+' >">') : '') : '')+
        '<option value="'+b+'"'+(b==c?' selected="selected"':"")+">"+b+"</option>";
}
a.yearshtml+="</select>";

이것은 OPTGROUP 태그로 수십 년 (현재 제외)을 둘러 쌉니다.

다음으로 이것을 CSS 파일에 추가하십시오.

.ui-datepicker OPTGROUP { font-weight:normal; }
.ui-datepicker OPTGROUP OPTION { display:none; text-align:right; }
.ui-datepicker OPTGROUP:hover OPTION { display:block; }

이것은 1 년 동안 방문자 마우스가 나타날 때까지 수십 년을 숨 깁니다. 방문자는 몇 년 동안 빠르게 스크롤 할 수 있습니다.

이것을 자유롭게 사용하십시오. 코드에 적절한 속성을 부여하십시오.

날짜 선택기를 구현하여 생년월일을 선택하고 yearRange내 버전 (1.5)에서 작동하지 않는 것처럼 변경하는 데 문제가있었습니다 . https://github.com/uxsolutions/bootstrap-datepicker 에서 최신 jquery-ui datepicker 버전으로 업데이트했습니다 .

그런 다음이 도구가 매우 유용한 즉시 도구를 제공한다는 것을 알았습니다. 따라서 전체 날짜 선택기를 구성하고 사용해야하는 설정을 볼 수 있습니다.

그게 내가 옵션을 알게 된 방법입니다

defaultViewDate

내가 찾고있는 옵션이며 웹을 검색하는 결과를 찾지 못했습니다.

따라서 다른 사용자의 경우 : 생년월일을 변경하기 위해 날짜 선택기를 제공하려면이 코드 옵션을 사용하는 것이 좋습니다.

$('#birthdate').datepicker({
    startView: 2,
    maxViewMode: 2,
    daysOfWeekHighlighted: "1,2",
    defaultViewDate: { year: new Date().getFullYear()-20, month: 01, day: 01 }
});

날짜 선택기를 열면 현재 연도를 기준으로 20 년 전의 연도를 선택하는보기로 시작합니다.