Bootstrap Datepicker功能不适用于模式弹出窗口

Question

我正在尝试使用在模式上显示的datepicker。 日历即将到来，但日期选择器选项不起作用。 我的代码是

 $('.date').datepicker({ autoclose:true, format:'dd-mm-yyyy', endDate:today, todayHighlight:true, orientation:"bottom", }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="modal fade" id="actionItemModalWrap" tabindex="-1" role="dialog" aria-labelledby="modifiedDataModal"> <div class="modal-dialog modal-lg modal-extra-lg" role="document"> <div class="arrow" style="left: 50%;"></div> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <h1 class="myriadproRegular textAlignCenter">Actions</h1> </div> <div class="modal-body" style="background-color: #ecefef !important;"> <div id='actionItemContentWrapper'> <div class="input-group date" data-provide="datepicker" style="width:260px;"> <input type="text" class="form-control"> <div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div> </div> </div> </div> </div> </div> </div> 

我应该怎么做才能使其正常工作？ 谢谢。

Answer 1

您使用什么datepicker ？ 在您的代码段中， endDate错误，因为today变量尚未初始化

 $('.date').datepicker({ autoclose:true, format:'dd-mm-yyyy', endDate: new Date(), todayHighlight:true, orientation:"bottom", }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js "></script> <div class="modal fade" id="actionItemModalWrap" tabindex="-1" role="dialog" aria-labelledby="modifiedDataModal"> <div class="modal-dialog modal-lg modal-extra-lg" role="document"> <div class="arrow" style="left: 50%;"></div> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <h1 class="myriadproRegular textAlignCenter">Actions</h1> </div> <div class="modal-body" style="background-color: #ecefef !important;"> <div id='actionItemContentWrapper'> <div class="input-group date" data-provide="datepicker" style="width:260px;"> <input type="text" class="form-control"> <div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div> </div> </div> </div> </div> </div> </div> 

Answer 2

尝试调用模式时应重新初始化日期选择器，因为模式是动态函数，它需要重新初始化模式内部的所有功能。

Answer 3

要显示datepicker在model弹出dialod，用途：自举datepicker.js

请检查以下示例：

 $(function () { $("#datepicker").datepicker({ autoclose: true, todayHighlight: true }).datepicker('update', new Date()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> Actions <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body" style="background-color: #ecefef !important;"> <div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy"> <input class="form-control" type="text" readonly /> <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> </div> </div> </div> </div> </div>