首頁 > web前端 > js教程 > 主體

如何在 jQuery UI DatePicker 中僅顯示月份和年份?

Susan Sarandon
發布: 2024-11-26 17:09:14
原創
335 人瀏覽過

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板