jQuery UI: 날짜 선택기의 연도 범위 드롭다운을 100년으로 설정합니다.

jQuery UI: 날짜 선택기의 연도 범위 드롭다운을 100년으로 설정합니다.

날짜 선택기를 사용하면 기본적으로 연도 드롭다운이 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"

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

다음을 시도해 보십시오.

Change Year:- true로 설정하면 현재 달의 달력에 표시된 이전 또는 다음 달의 셀을 선택할 수 있음을 나타냅니다.이 옵션은 옵션과 함께 사용됩니다.showOtherMonths를 true로 설정합니다.

Year Range:- 연도 드롭다운의 연도 범위를 지정합니다. (기본값: "-10:+10")

예:-

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

참조:- jquery 날짜 선택기에 연도 범위 설정

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

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

제가 한 일은:

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

50현재 연도의 범위입니다.

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

그리고 나서 저는 그들이 이 매우 유용한 즉각적인 도구를 제공한다는 것을 알게 되었습니다. 그래서 여러분은 전체 날짜 선택기를 구성하고 어떤 설정을 사용해야 하는지 볼 수 있습니다.

그래서 저는 그 선택지가

기본 보기 날짜

제가 찾던 옵션인데 웹 검색 결과를 찾지 못했습니다.

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

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

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

원래 질문이 올라온 지가 얼마나 된 것인지를 보면 이런 제안을 하기에는 좀 늦은 감이 있지만, 제가 한 일을 했습니다.

저는 70년의 범위가 필요했는데, 100년 정도는 아니지만 방문객이 스크롤하기에는 아직 너무 많은 기간입니다.(jQuery는 그룹별로 1년 내내 진행되지만, 대부분의 사람들에게 고통입니다.)

첫 번째 단계는 날짜 선택 위젯에 대한 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; }

이것은 방문객이 기준 연도에 마우스를 댈 때까지의 수십 년을 숨깁니다.방문자는 몇 년 동안 빠르게 스크롤할 수 있습니다.

자유롭게 사용하십시오. 코드에 적절한 속성을 입력하십시오.

먼저 Js 파일의 두 가지 유형이 있다는 것을 알고 있기 때문에 어떤 파일이 뷰를 제공하는지 주의하십시오. 먼저 여기서 일반적인 파일은 bootstrap-datapicker.js이고 주로 사용되는 다른 파일은 bootstrap-datapicker.min.js입니다. 각 파일에서 동일한 부분을 찾아서 편집하는 것이 좋습니다.try yearRange: "c-100:c+0" 만약 당신이 이것을 하고 당신의 달력 보기가 지난 100년과 10년을 선택할 수 있는 파일을 저장한다면.

언급URL : https://stackoverflow.com/questions/13865218/jquery-ui-datepicker-set-year-range-dropdown-to-100-years