jQuery UI DatePicker에서 월과 연도만 표시하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

jQuery UI DatePicker에서 월과 연도만 표시하는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-11-26 17:09:14

원래의

405명이 탐색했습니다.

How to Display Only Month and Year in jQuery UI DatePicker?

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

jQuery UI의 DatePicker 플러그인은 모양을 사용자 정의할 수 있는 유연성을 제공합니다. 전체 달력을 표시할 필요가 없는 시나리오의 경우 사용자는 월과 연도만 표시할 수 있습니다.

해결책:

이를 달성하려면 "hackish " 그러나 기능적 접근 방식에는 프로그래밍 방식으로 달력 구성 요소를 숨기고 JavaScript 구성을 수정하는 작업이 포함됩니다. 예는 다음과 같습니다.

<html>
<head>
    <script src="jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link rel="stylesheet" href="jquery-ui.css">
    <script>
        $(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));
                }
            });
        });
    </script>
    <style>
        .ui-datepicker-calendar {
            display: none;
        }
    </style>
</head>
<body>
    <label for="startDate">Date:</label>
    <input name="startDate">

로그인 후 복사

이 접근 방식은 월 및 연도 선택 기능을 유지하면서 달력의 표시를 비활성화합니다. onClose 이벤트 핸들러는 선택한 날짜를 선택한 월과 연도의 첫 번째 날로 조정하여 입력 상자에 월과 연도만 표시되도록 합니다.

향상된 솔루션:

시간이 지남에 따라 원래 접근 방식의 잠재적인 단점을 해결하는 더욱 세련된 솔루션이 등장했습니다. 그러한 솔루션 중 하나는 달력 날짜가 선택 가능하지 않도록 jQuery UI의 _selectDay 메서드를 재정의하는 것입니다. 이 접근 방식을 사용하면 원하는 월 및 연도 표시를 제공하면서 날짜 입력을 더욱 강력하게 처리할 수 있습니다.

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