如何使用 jQuery UI DatePicker 仅显示月份和年份？-js教程-PHP中文网

如何使用 jQuery UI DatePicker 仅显示月份和年份？

Patricia Arquette

发布： 2024-11-30 20:51:18

原创

342 人浏览过

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));
    }
    });
});

登录后复制

该脚本使用特定的配置来配置日期选择器设置：

changeMonth 和 changeYear：启用更改月份和年份。
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中文网其他相关文章！