Bootstrap Datepicker - 只有月份和年份不起作用答案

【问题标题】：Boostrap Datepicker - months and year only doesn't workBootstrap Datepicker - 只有月份和年份不起作用
【发布时间】：2020-08-27 23:39:08
【问题描述】：

我正在研究如何使用bootstrap datepicker，但我需要它只显示月份或年份，就像这样：

但结果却变成了这样：

我只需要选择月份和年份，而不是整个日历。下面是我的整个代码sn-p：

$(document).ready(() => {
    $("#datepicker").datepicker( {
        format: "mm-yyyy",
        startView: "months", 
        minViewMode: "months"
    });
})

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>My Teasting Website</title>

  <!--Bootstrap css-->
  <link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
  <!--bootstrap-datepicker css-->
  <link rel="stylesheet" href="/src/datepicker/css/datepicker.css">

</head>

<body>


    <input type="text" readonly="readonly" name="date" id="datepicker">

  <script src="/src/jquery.js"></script>
  <!--Bootstrap js-->
  <script src="src/bootstrap/js/bootstrap.min.js"></script>
  <script src="/src/datepicker/js/bootstrap-datepicker.js"></script>
  <script src="/js/script.js"></script>

</body>

</html>

【问题讨论】：

尝试写<script src="/src/bootstrap/js/bootstrap.min.js"></script>而不是<script src="src/bootstrap/js/bootstrap.min.js"></script>
我在开头加了/
添加/后还是不行
引导 1.9.0？这是我下载的网站。 uxsolutions.github.io/bootstrap-datepicker/…
@ElijahLeis，请查看我的新答案

标签： javascript datepicker bootstrap-datepicker

【解决方案1】：

您正在寻找的功能在 datetimepicker 中，而不仅仅是在 datepicker 中。它拥有您想要的 UI。

注意：日历会显示月或年，但当您选择特定值时，它会显示为 YYYY-MM 格式。从日历中选择值后，无法在文本框中显示 YYYY 或 MM。

$(function() {
  $('#datetimepicker2').datetimepicker({
    viewMode: 'months',
    format: 'YYYY-MM'
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date'>
          <input type='text' class="form-control" id='datetimepicker2' />
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：