defaultViewDate在Bootstrap日期選擇器上不起作用

Question

好的，所以我看過Bootstrap Datepicker：我認為可以將開始日期更改為明天 ，但我沒有。

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

似乎來自您對輸入的攻擊，是的...

這項工作和圖標 ：

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