Bootstrap Datepicker - 仅月份和年份

1个回答

younger-pig

2025-07-10 02:21

信用卡

使用Bootstrap Datepicker中的"仅月份和年份"功能可以让用户在网页上选择特定的月份和年份，而不需要选择具体的日期。这个功能在一些需要用户仅选择月份和年份的场景中非常有用，比如选择信用卡的有效期或者查询特定月份的数据。本文将介绍如何使用Bootstrap Datepicker实现这一功能，并提供相应的案例代码。

首先，我们需要在网页中引入Bootstrap的CSS和JS文件，以及Bootstrap Datepicker的CSS和JS文件。可以通过直接下载这些文件或者使用CDN来引入。以下是引入文件的示例代码：

html
<link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/CSS/bootstrap.min.CSS">
<link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://cdnJS.cloudflare.com/Ajax/libs/bootstrap-datepicker/1.9.0/CSS/bootstrap-datepicker.min.CSS">
<script src="https://Ajax.Googleapis.com/Ajax/libs/jquery/3.5.1/jquery.min.JS"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/JS/bootstrap.min.JS"></script>
<script src="https://cdnJS.cloudflare.com/Ajax/libs/bootstrap-datepicker/1.9.0/JS/bootstrap-datepicker.min.JS"></script>

接下来，我们需要在网页中添加一个输入框，用户可以点击该输入框选择月份和年份。可以使用HTML的input元素，并为其添加一个特定的类名，让Bootstrap Datepicker能够识别它。以下是示例代码：

html
<input type="text" class="form-control datepicker-month-year" readonly>

在Javascript中，我们需要初始化这个日期选择器，并指定它只能选择月份和年份。以下是初始化代码的示例：

Javascript
$(document).ready(function(){
    $('.datepicker-month-year').datepicker({
        format: "mm-yyyy",
        startView: "months",
        minViewMode: "months",
        autoclose: true
    });
});

在上述代码中，我们通过指定format为"mm-yyyy"来限制日期选择器只能显示月份和年份。startView和minViewMode分别设置了选择器的初始视图和最小视图模式，这两者都被设置为"months"，以确保用户只能选择月份和年份。autoclose选项使得选择器在选择日期后自动关闭。

案例代码：

以下是一个完整的案例代码，演示了如何使用Bootstrap Datepicker实现"仅月份和年份"的功能：

html
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Datepicker - 仅月份和年份</title>
    <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/CSS/bootstrap.min.CSS">
    <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://cdnJS.cloudflare.com/Ajax/libs/bootstrap-datepicker/1.9.0/CSS/bootstrap-datepicker.min.CSS">
    <script src="https://Ajax.Googleapis.com/Ajax/libs/jquery/3.5.1/jquery.min.JS"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/JS/bootstrap.min.JS"></script>
    <script src="https://cdnJS.cloudflare.com/Ajax/libs/bootstrap-datepicker/1.9.0/JS/bootstrap-datepicker.min.JS"></script>
</head>
<body>
    <div class="contAIner">
        <h2>选择月份和年份</h2>
        <input type="text" class="form-control datepicker-month-year" readonly>
    </div>
    <script>
        $(document).ready(function(){
            $('.datepicker-month-year').datepicker({
                format: "mm-yyyy",
                startView: "months",
                minViewMode: "months",
                autoclose: true
            });
        });
    </script>
</body>
</html>

：

通过使用Bootstrap Datepicker的"仅月份和年份"功能，我们可以轻松地在网页上实现只选择月份和年份的日期选择器。只需要引入必要的CSS和JS文件，并在HTML中添加相应的输入框和类名，然后在Javascript中进行初始化即可。这个功能对于一些特定场景的日期选择非常有用，可以提高用户体验和操作便利性。

举报有用（4）分享收藏

Bootstrap Datepicker - 仅月份和年份

1个回答

younger-pig

热门话题

相关问题