引导日期选择器仅显示日期

Question

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

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

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

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

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

Answer 1

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

• 将format 选项设置为d（或dd）
• 将maxViewMode选项设置为0（minViewMode默认为0）
• 隐藏上/下个月按钮和月份名称按钮，您可以使用 CSS 来实现：
  • 日期选择器的天数视图位于具有.datepicker-days 类的表中
  • 上一个和下一个按钮位于.datepicker-days 表内，它们有.prev 和.next 类
  • 月份名称在同一个表中，并且具有.datepicker-switch 类
• 日期DatePicker应显示正确的天数，因此您必须在选择年份和月份时更新@ 987654323（请参阅changeDate事件）
  • 由于picker没有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>