jQuery UI DatePicker를 사용하여 월과 연도만 표시하려면 어떻게 해야 합니까?
- Patricia Arquette원래의
- 2024-11-30 20:51:18351검색
jQuery UI DatePicker로 월 및 연도 표시
jQuery UI DatePicker 구성 요소는 웹 애플리케이션에 달력을 표시하기 위한 다목적 도구입니다. 그러나 달력 그리드를 생략하고 월과 연도만 표시하는 것이 바람직한 경우도 있습니다. 이는 영리한 해결 방법을 통해 달성할 수 있습니다.
"월 연도만" 표시 만들기
다음 코드 조각이 해결책을 제공합니다.
$(function() {
$('.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));
}
});
});
이 스크립트는 날짜 선택기를 특정 항목으로 구성합니다. 설정:
- changeMonth 및 changeYear: 월 및 연도 변경을 활성화합니다.
- showButtonPanel: 버튼 표시 월 및 연도 패널 탐색.
- dateFormat: 월과 연도에 대해서만 원하는 형식을 "MM yy"로 지정합니다.
- onClose: 선택기를 닫을 때, 선택한 날짜를 선택한 달의 1일로 설정하고 year.
캘린더 그리드 숨기기
캘린더 그리드를 숨기려면 다음 CSS 규칙을 추가하세요.
.ui-datepicker-calendar {
display: none;
}
전체 HTML 예
다음은 HTML의 수정된 버전입니다. 필요한 모든 요소가 포함된 파일:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date : < /label>
<input name="startDate">
이 개정된 솔루션은 사용자가 달력 그리드를 표시하지 않고 월과 연도를 선택할 수 있는 사용자 인터페이스를 제공합니다.
위 내용은 jQuery UI DatePicker를 사용하여 월과 연도만 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.