使用jQuery UI DatePicker 顯示月份和年份
jQuery UI DatePicker 元件是用於在Web 應(yīng)用程式中顯示日曆的多功能工具。但是，在某些情況下，可能需要僅顯示月份和年份，而忽略日曆網(wǎng)格。這可以透過(guò)巧妙的解決方法來(lái)實(shí)現(xiàn)。
建立「僅月年」顯示
以下程式碼片段提供了解決方案：
$(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));
}
});
});
該腳本使用特定的設(shè)定來(lái)設(shè)定日期選擇器設(shè)定：
-
changeMonth 和changeYear：?jiǎn)⒂酶脑路莺湍攴荨?
-
showButtonPanel：顯示按鈕月份和年份面板導(dǎo)航。
-
dateFormat：僅將月份和年份指定為「MM yy」。
-
onClose：關(guān)閉選擇器時(shí)，將所選日期設(shè)定為所選月份的第一天，然後年。
隱藏日曆網(wǎng)格
要隱藏日曆網(wǎng)格，請(qǐng)新增下列CSS 規(guī)則：
.ui-datepicker-calendar {
display: none;
}
完整的HTML 範(fàn)例
這裡是修訂版包含所有必要元素的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">
此修訂後的解決方案提供了一個(gè)使用者介面，允許使用者選擇月份和年份，而無(wú)需顯示日曆網(wǎng)格。
以上是如何使用 jQuery UI DatePicker 僅顯示月份和年份？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！