jQuery datepicker 연도 표시


78

jQuery datepicker를 사용하면 표시되는 연도 범위를 어떻게 변경합니까? jQuery UI 사이트에서 기본값은 "현재 연도 전후 10 년 표시"입니다. 나는 이것을 생일 선택에 사용하고 싶습니다. 그리고 10 년 전 오늘은 좋지 않습니다. jQuery datepicker로이 작업을 수행 할 수 있습니까? 아니면 다른 솔루션을 사용해야합니까?

datepicker 데모 링크 : http://jqueryui.com/demos/datepicker/#dropdown-month-year

답변:


165

데모 페이지를 조금 아래로 보면 "Restricting Datepicker"섹션이 표시됩니다. 드롭 다운을 사용하여 " Year dropdown shows last 20 years"demo 를 지정하고 소스보기를 누르십시오.

$("#restricting").datepicker({ 
    yearRange: "-20:+0", // this is the option you're looking for
    showOn: "both", 
    buttonImage: "templates/images/calendar.gif", 
    buttonImageOnly: true 
});

당신은 (분명 변화 동일한 작업을 수행 할 수 있습니다 -20-100또는 무언가).


감사합니다! 나는 거기를 살펴 보았지만 그것을 놓쳤을 것입니다. 완벽하게 작동합니다.
John Boker

1
이걸 쓰려고하는데 현재 선택된 날짜 로부터 -20 년만 보여요 ...?
ajbeaven 2010

5
당신은 또한 사용할 수있는 c대신에 +0, 그래서yearRange: "-20:c",
Kokos

40

연도 또는 월 선택 상자를 표시하지 않는 이유는 무엇입니까?

$( ".datefield" ).datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange:'-90:+0'
});

1
아마도 yearRange 주위에 따옴표가 있어야합니다.
Eonasdan

이것이 바로 Im이 찾고있는 것입니다 .. 감사합니다 .. changeMonth, changeYear
kebyang

그것은 완벽한 대답입니다! 감사합니다!
DmitryBoyko 2013

10

아무도 입력하지 않은 것은 하드 코딩 된 날짜 범위를 설정할 수도 있다는 것입니다.

예를 들면 :

yearRange: "1901:2012"

이를 수행하지 않는 것이 좋을 수 있지만 이는 완벽하게 유효한 옵션입니다 ( "1963 : 1984"와 같이 카탈로그에서 특정 연도를 합법적으로 찾는 경우 유용함).


6

생년월일 필드 (그리고 내가 사용하는 것)에 대한 완벽한 것은 Shog9가 말한 것과 비슷하지만 더 구체적인 생년월일 예를 제공 할 것입니다.

$(".datePickerDOB").datepicker({ 
    yearRange: "-122:-18", //18 years or older up to 122yo (oldest person ever, can be sensibly set to something much smaller in most cases)
    maxDate: "-18Y", //Will only allow the selection of dates more than 18 years ago, useful if you need to restrict this
    minDate: "-122Y"
});

미래의 Google 사용자가이 정보를 유용하게 사용하기를 바랍니다. :).


가장 오래된 사람은 Jeanne Calmant이며 122 세였습니다. 좀 여유 :) 유지 (140)에 넣어 것
크리스토프 후씨

@ChristopheRoussy 당신이 맞습니다, 나는 살아있는 가장 나이 많은 사람을 생각하고 있었다고 생각합니다 ... 지금은 116입니다 :). 답변이 수정되었습니다.
Maverick

5

@ Shog9가 게시 한 내용에 추가하여 beforeShowDay : 콜백 함수에서 개별적으로 날짜를 제한 할 수도 있습니다.

날짜를 취하고 부울 배열을 반환하는 함수를 제공합니다.

"$(".selector").datepicker({ beforeShowDay: nationalDays}) 
natDays = [[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'], [4, 27, 'za'], 
[5, 25, 'ar'], [6, 6, 'se'], [7, 4, 'us'], [8, 17, 'id'], [9, 7, 
'br'], [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']]; 
function nationalDays(date) { 
    for (i = 0; i < natDays.length; i++) { 
      if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == 
natDays[i][1]) { 
        return [false, natDays[i][2] + '_day']; 
      } 
    } 
  return [true, '']; 
} 

여기서 구문 강조 표시에있어 문제점은 무엇입니까? 그리고 nationalDays와의 거래는 무엇입니까? 코드를 이해하지 못합니다. 명확히 할 수 있다면 죄송합니다.
knocte 2014

3
 $("#DateOfBirth").datepicker({
        yearRange: "-100:+0",
        changeMonth: true,
        changeYear: true,
    });

yearRange : '1950 : 2013', // 하드 코딩 된 연도 범위 지정 또는이 방법

yearRange : "-100 : +0", // 지난 100 년

연도 및 월 선택에 대한 드롭 다운을 표시하는 데 도움이됩니다.


2

au, nz, ie 등은 국경일이 표시되는 국가 (호주, 뉴질랜드, 아일랜드 등)의 국가 코드입니다. 코드에서 볼 수 있듯이 이러한 값은 '_day'와 결합되어 CSS 스타일로 해당 날짜에 적용되도록 다시 전달됩니다. 해당 스타일은 아래에 표시된 형식으로, 그 날의 텍스트를 이동시키고 국가 국기 이미지로 대체합니다.

.au_day {
  text-indent: -9999px;
  background: #eee url(au.gif) no-repeat center;
}

새 스타일로 다시 전달되는 'false'값은 요즘 선택되지 않을 수 있음을 나타냅니다.


1

이게 잘 될 것 같아요

$(function () {
    $(".DatepickerInputdob").datepicker({
        dateFormat: "d M yy",
        changeMonth: true,
        changeYear: true,
        yearRange: '1900:+0',
        defaultDate: '01 JAN 1900'
    });
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.