javascript - Bootstrap 日期选择器仅显示日期

Question

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

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

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

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

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

Answer 1

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

• 设置 format选项为d(或dd)
• 设置maxViewMode选项为 0(minViewMode 默认为 0)
• 隐藏上个月/下个月按钮和月份名称按钮，您可以使用 CSS 来完成:
  • 日期选择器的天 View 位于具有.datepicker-days类的表格内
  • 上一个和下一个按钮位于 .datepicker-days 表内，它们具有 .prev 和 .next 类
  • 月份名称位于同一个表中，并且具有 .datepicker-switch 类
• 日期日期选择器应显示正确的天数，因此您必须动态更新 defaultViewDate选择年份和月份时(请参阅 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>