jQuery UI DatePicker에서 월과 연도만 표시하려면 어떻게 해야 합니까?

jQuery UI DatePicker에서 월과 연도만 표시

jQuery UI DatePicker는 웹 애플리케이션에 달력을 표시하기 위한 다목적 도구입니다. 이 플러그인을 사용하여 전체 달력 대신 월과 연도만 표시하려는 경우 다음 방법을 따르세요.

HTML 및 JavaScript 코드를 약간 수정하면 영리한 솔루션이 됩니다. HTML에서 월과 연도를 표시하려는 입력 필드에 사용자 정의 클래스를 추가합니다. JavaScript 코드에서 이 클래스를 사용하여 DatePicker 구성에 필요한 옵션을 추가합니다.

구체적으로 필요한 옵션은 다음과 같습니다.

• changeMonth: 월 변경 허용
• changeYear: 연도 변경 허용
• showButtonPanel: "Done"으로 버튼 패널을 표시하고 "오늘" 버튼
• dateFormat: 출력 형식을 'MM yy'로 지정합니다(예: 5월 10일)
• onClose: 선택한 월과 연도로 입력 필드를 업데이트하는 콜백 함수

캘린더가 표시되지 않도록 하려면 CSS 스타일을 추가하여 캘린더 요소를 숨기세요. (ui-datepicker-calendar).

전체 예는 다음과 같습니다.

<label for="startDate">Date:</label>
<input name="startDate">

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

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

이 해킹을 사용하면 jQuery UI에 월과 연도만 표시할 수 있습니다. 기능에 영향을 주지 않는 DatePicker입니다.

위 내용은 jQuery UI DatePicker에서 월과 연도만 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!