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执行此操作：
- datepicker的天视图位于具有.datepicker-days class
- prev和next按钮位于.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>

Bootstrap datepicker仅显示日期

1 个答案: