首頁 > web前端 > js教程 > 如何使用 jQuery UI DatePicker 僅顯示月份和年份?

如何使用 jQuery UI DatePicker 僅顯示月份和年份?

Patricia Arquette
發布: 2024-11-30 20:51:18
原創
386 人瀏覽過

How Can I Display Only Month and Year Using jQuery UI DatePicker?

使用jQuery UI DatePicker 顯示月份和年份

jQuery UI DatePicker 元件是用於在Web 應用程式中顯示日曆的多功能工具。但是,在某些情況下,可能需要僅顯示月份和年份,而忽略日曆網格。這可以透過巧妙的解決方法來實現。

建立「僅月年」顯示

以下程式碼片段提供了解決方案:

$(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));
    }
    });
});
登入後複製

該腳本使用特定的設定來設定日期選擇器設定:

  • changeMonthchangeYear:啟用更改月份和年份。
  • showButtonPanel:顯示按鈕月份和年份面板導航。
  • dateFormat:僅將月份和年份指定為「MM yy」。
  • onClose:關閉選擇器時,將所選日期設定為所選月份的第一天,然後年。

隱藏日曆網格

要隱藏日曆網格,請新增下列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中文網其他相關文章!

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