defaultViewDate not working on Bootstrap datepicker

Question

OK so I have seen Bootstrap Datepicker : Changing start date to tomorrow which I thought would get me right but it doesn't.

$("#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>

Not beautiful but it works - apart from default view for the end picker (the value works fine) (ie the values in the input fields are fine and the 367 day limit work.

I wonder if it is because the id and the data-provide are attached to the input-group not input but you have to do that to make the icon work as part of the datepicker and NOT having the icon work is daft from a UX point of view.

Any thoughts?

PS We are talking about http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#id3

Answer 1

Seem to come from your hack of the input yes...

This work 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>