defaultViewDate не работает на Bootstrap datepicker

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, но вы должны сделать это, чтобы сделать значок работу в рамках DatePicker и не имея значок работы является ненормальным с точки UX обзора

Любые мысли?

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>