Bootstrap 日期选择器仅显示日期

ni8mr 发表于 Dev

尼8mr

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

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

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

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

文森佐

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。