developer tip

jQuery datepicker 연도 표시

optionbox 2020. 10. 11. 10:30
반응형

jQuery datepicker 연도 표시


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

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


데모 페이지를 조금 아래로 보면 "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또는 무언가).


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

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

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

예를 들면 :

yearRange: "1901:2012"

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


생년월일 필드 (그리고 내가 사용하는 것)에 대한 완벽한 것은 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"
});

미래의 googlers가 이것이 유용하다고 생각하기를 바랍니다. :).


@ 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, '']; 
} 

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

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

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

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


au, nz, ie, etc. are the country codes for the countries whose national days are being displayed (Australia, New Zealand, Ireland, ...). As seen in the code, these values are combined with '_day' and passed back to be applied to that day as a CSS style. The corresponding styles are of the form show below, which moves the text for that day out of the way and replaces it with an image of the country's flag.

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

The 'false' value that is passed back with the new style indicates that these days may not be selected.


i think this may work as well

$(function () {
    $(".DatepickerInputdob").datepicker({
        dateFormat: "d M yy",
        changeMonth: true,
        changeYear: true,
        yearRange: '1900:+0',
        defaultDate: '01 JAN 1900'
    });

참고URL : https://stackoverflow.com/questions/269545/jquery-datepicker-years-shown

반응형