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，请使用：bootstrap-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>

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

3 个答案: