defaultViewDate 在 Bootstrap 日期选择器上不起作用

Question

好的，我看到了Bootstrap Datepicker : Changing start date to tomorrow，我认为这会让我正确，但事实并非如此。

$("#datepickerStart, #datepickerEnd").datepicker({
  todayHighlight: true,
  endDate: '+367d'
})

var fullDate = new Date();
  console.log(fullDate);
var twoDigitMonth = fullDate.getMonth() + "";
if (twoDigitMonth.length == 1)
  twoDigitMonth = "0" + twoDigitMonth;
var twoDigitDate = fullDate.getDate() + "";
if (twoDigitDate.length == 1)
  twoDigitDate = "0" + twoDigitDate;
var $currentDate = twoDigitMonth + "/" + twoDigitDate + "/" + fullDate.getFullYear();
var $endYear = fullDate.getFullYear() + 1;
  console.log($currentDate);
  console.log($endYear);
var $endDate = twoDigitMonth + "/" + twoDigitDate + "/" + $endYear;
  console.log($currentDate);
  console.log($endDate);

$("#datepickerStart").find("input").attr("value", $currentDate);

$("#datepickerEnd").find("input").attr("value", $endDate);

$("#datepickerEnd").datepicker({
  defaultViewDate: {
    year: $endYear,
    month: twoDigitMonth,
    day: twoDigitDate
  },
  format: 'mm/dd/yyyy',
})

@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.css');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<div class="form-group col-sm-3 colFlushL hideme" id="endDateWrapper">
  <label class="control-label" for="datepickerEnd">End <small><span class="text-muted">(max 1 year)</span></small>
  </label>

  <div class="input-group date colFlush" data-provide="datepicker" id="datepickerEnd">
    <input type="text" class="form-control" name="datepickerEnd" value="">
    <span class="input-group-addon"><i
            class="glyphicon glyphicon-th"></i></span>
  </div>
</div>

不漂亮，但它可以工作 - 除了末端选择器的默认视图（该值工作正常）（即输入字段中的值正常并且 367 天限制工作。

我想知道是不是因为 id 和 data-provide 附加到 input-group 而不是 input 但你必须这样做才能使图标作为日期选择器的一部分而不是图标从用户体验的角度来看，这项工作很愚蠢。

有什么想法吗？

PS 我们说的是http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#id3

Answer 1

似乎来自您对输入的破解是...

这个作品and the icon too：

$("#datepickerStart, #datepickerEnd").datepicker({
  todayHighlight: true,
  endDate: '+367d'
})

var fullDate = new Date();
  console.log(fullDate);
var twoDigitMonth = fullDate.getMonth() + "";
if (twoDigitMonth.length == 1)
  twoDigitMonth = "0" + twoDigitMonth;
var twoDigitDate = fullDate.getDate() + "";
if (twoDigitDate.length == 1)
  twoDigitDate = "0" + twoDigitDate;
var currentDate = twoDigitMonth + "/" + twoDigitDate + "/" + fullDate.getFullYear();
var endYear = fullDate.getFullYear() + 1;
  console.log(endYear+' '+twoDigitMonth+' '+twoDigitDate);
var endDate = twoDigitMonth + "/" + twoDigitDate + "/" + endYear;

$("#datepickerEnd").attr("value", endDate);

$("#datepickerEnd").datepicker({
  defaultViewDate: {
    year: endYear,
    month: twoDigitMonth,
    day: twoDigitDate
  },
  format: 'mm/dd/yyyy',
})

@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.css');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>

<div class="form-group col-xs-5 colFlushL hideme" id="endDateWrapper">
  <label class="control-label" for="datepickerEnd">End <small><span class="text-muted">(max 1 year)</span></small>
  </label>

  <div class="input-group date colFlush" data-provide="datepicker">
    <input  id="datepickerEnd" type="text" class="form-control" name="datepickerEnd" value="">
    <div class="input-group-addon"><span class="glyphicon glyphicon-th"></span></div>
  </div>
  
</div>