DatePicker里面的bootstrap模态

时间:2016-06-02 15:04:07

标签: jquery twitter-bootstrap jquery-ui datepicker

我一直在尝试在引导程序模式中插入日期选择器,但它不起作用,这是我的代码

链接

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">

表格

<div class="modal fade" id="myModalCustomer" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
              <form name="newCustomer" novalidate role="form">
                 <div class="form-group">
                   <label for="dob">DOB:</label><br>
                   <div class="input-group">
                     <input type="text" name="idTourDateDetails" id="idTourDateDetails" readonly="readonly" class="form-control clsDatePicker"> <span class="input-group-addon"><i id="calIconTourDateDetails" class="glyphicon glyphicon-th"></i></span>
                   </div>
                 </div>
                 <input type='submit' value='Create' ng-click='addUser()' class="btn btn-info">
             </form>
             <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
          </div>
       </div>
    </div>
</div>

JS

$('#idTourDateDetails').datepicker({
     dateFormat: 'dd-mm-yy',
     minDate: '+5d',
     changeMonth: true,
     changeYear: true,
     altField: "#idTourDateDetailsHidden",
     altFormat: "yy-mm-dd"
 });
 $.fn.modal.Constructor.prototype.enforceFocus = function() {};

CSS

.clsDatePicker {
z-index: 100000;
}

一直使用此作为参考Implementing jQuery DatePicker in Bootstrap modal

和该页面的小提琴http://jsfiddle.net/surjithctly/93eTU/16/

我的控制台上没有任何错误。但是,日期选择器并没有显示

0 个答案:

没有答案