월과 연도만 표시하도록 jQuery UI DatePicker를 수정하는 방법은 무엇입니까?

월과 연도만 표시하도록 jQuery UI DatePicker 수정

웹 애플리케이션에서는 대화형 날짜 선택기를 동적으로 표시하는 것이 필수적일 수 있습니다. jQuery UI는 이러한 목적을 위해 다양한 DatePicker 플러그인을 제공합니다. 그러나 달력 그리드 자체 없이 월과 연도만 표시하려는 시나리오가 있을 수 있습니다.

이러한 요구에 부응하기 위해 DatePicker 동작을 수정하는 JavaScript 해킹을 살펴보겠습니다.

$('.date-picker').datepicker({
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'MM yy',
  onClose: function(dateText, inst) {
    $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
  }
});

제공된 코드 조각에서 onClose 콜백은 중요한 역할을 합니다. 날짜 선택 패널이 닫히면 선택한 월 및 연도 값만 입력 필드에 반영됩니다. 특정 날짜를 선택하는 대신 setDate() 메서드는 입력 날짜를 선택한 월과 연도의 첫 번째 날로 설정합니다.

수정을 완료하려면 CSS를 사용하여 날짜 선택기의 스타일을 지정해야 합니다. 달력 그리드 숨기기:

.ui-datepicker-calendar {
  display: none;
}

이러한 JavaScript 및 CSS 조정을 사용하면 jQuery UI DatePicker를 효과적으로 사용하여 월 및 연도 옵션만 표시하고 내에서 특수한 사용자 인터페이스 요구 사항을 충족할 수 있습니다. 귀하의 지원서입니다.

위 내용은 월과 연도만 표시하도록 jQuery UI DatePicker를 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!