javascript - 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>

不漂亮，但它可以工作 - 除了最终选择器的默认 View (该值工作正常)(即输入字段中的值很好并且 367 天限制工作。

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

有什么想法吗？

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>