Bootstrap 日期选择器只显示日期

Question

是否可以只显示 Bootstrap datepicker 中的日期？

我使用以下方法仅显示月份和年份 -

$("#year").datepicker({
    format: " yyyy", 
    viewMode: "years",
    minViewMode: "years"
});

$("#month").datepicker({
    format: " mm", 
    viewMode: "months",
    minViewMode: "months",
    maxViewMode: 0
});

实时 demo 仅显示年和月字段中的年份和月份选择。我只想在 Date 字段中显示从 1 到 31 的日期，顶部没有月份、年份，也没有日期名称。

Answer 1

是的，这是可能的，但有点复杂，你必须：

将 format 选项设置为 d（或 dd）
将 maxViewMode 选项设置为 0（minViewMode 默认为 0）
隐藏 prev/next 月份按钮和月份名称按钮，您可以使用 CSS 来实现：
- 日期选择器的 天视图 位于 table 内，该 .datepicker-days class
- 上一个和下一个按钮在 .datepicker-days table 内，它们有 .prev 和 .next classes
- 月份名称与 table 相同，并且具有 .datepicker-switch class
日期选择器应该显示正确的天数，所以你必须动态更新 defaultViewDate when year and month are selected (see changeDate 事件）
- 由于选择器没有 defaultViewDate 的 setter 方法，您可以 destroy 然后重新初始化它。

这是一个完整的工作示例：

$(document).ready(function() {
  var dateOpt = {
    format: 'dd',
    maxViewMode: 0
  };
  
  $("#year").datepicker({
    format: "yyyy",
    viewMode: "years",
    minViewMode: "years"
  }).on('changeDate', function(e) {
    var month = $('#month').datepicker('getDate');
    if( !month ){
      month = new Date();
    }
    dateOpt.defaultViewDate = {
      year: e.date.getFullYear(),
      month: month.getMonth(),
      day: 1
    };
    // Reset date datepicker
    $('#date').datepicker('destroy');
    // Re-init with defaultViewDate option
    $('#date').datepicker(dateOpt);
  });

  $("#month").datepicker({
    format: "mm",
    viewMode: "months",
    minViewMode: "months",
    maxViewMode: 0
  }).on('changeDate', function(e) {
    var year = $('#year').datepicker('getDate');
    if( !year ){
      year = new Date();
    }
    dateOpt.defaultViewDate = {
      year: year.getFullYear(),
      month: e.date.getMonth(),
      day: 1
    };
    $('#date').datepicker('destroy');
    $('#date').datepicker(dateOpt);
  });

  $("#date").datepicker(dateOpt)
});

/* Hide prev/next buttons and month name*/
.datepicker-days>table>thead>tr>th.prev,
.datepicker-days>table>thead>tr>th.datepicker-switch,
.datepicker-days>table>thead>tr>th.next {
  display: none;
}

/* Hide days of previous month */
td.old.day{
  visibility: hidden;
}

/* Hide days of next month */
td.new.day{
  display: none;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

<div class="container">
  <div class="form-group row">
    <label class="form-control-label col-md-3" for="year">Year</label>
    <div class="col-md-9">
      <input type="text" id="year" class="form-control">
    </div>
  </div>
  <div class="form-group row">
    <label class="form-control-label col-md-3" for="year">Month</label>
    <div class="col-md-9">
      <input type="text" id="month" class="form-control">
    </div>
  </div>
  <div class="form-group row">
    <label class="form-control-label col-md-3" for="year">Date</label>
    <div class="col-md-9">
      <input type="text" id="date" class="form-control">
    </div>
  </div>
</div>

Bootstrap 日期选择器只显示日期

Bootstrap datepicker show dates only

javascript

jquery

datepicker

bootstrap-datepicker