programing

jQuery datepicker 년수 표시됨

sourcejob 2023. 11. 5. 11:33
반응형

jQuery datepicker 년수 표시됨

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

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

데모 페이지를 조금만 내려다보면 "날짜 선택 제한" 섹션이 나타납니다.드롭다운을 사용하여 "를 지정합니다.Year dropdown shows last 20 years" 데모 및 히트 보기 소스:

$("#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이 말한 것과 유사하지만, 좀 더 구체적인 DOB 예를 들어보겠습니다.

$(".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"
});

미래의 구글링자들이 이것을 유용하게 생각하기를 바랍니다 :).

@Shog9이 게시한 내용 외에 쇼데이 이전: 콜백 기능에서 개별적으로 날짜를 제한할 수도 있습니다.

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

"$(".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', // 하드 코딩된 연도 범위 지정 또는 이 방식

연도 범위: "-100:+0", // 최근 100년

연도 및 월 선택 항목에 대한 드롭다운을 표시하는 데 도움이 될 것입니다.

au, nz, ie 등은 국가 날짜가 표시되는 국가의 국가 코드입니다(호주, 뉴질랜드, 아일랜드 등).코드에서 보는 바와 같이, 이 값들은 '_day'와 결합되어 CSS 스타일로 그날에 적용되기 위해 다시 전달됩니다.해당 스타일은 해당 날짜의 텍스트를 이동하여 해당 국가의 국기 이미지로 대체하는 아래와 같은 형태의 쇼입니다.

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

새 스타일과 함께 반환되는 'false' 값은 이 날짜를 선택할 수 없음을 나타냅니다.

이것도 효과가 있을지도 모른다고 생각합니다.

$(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

반응형