bootstrap --- 在 modal中的 datetimepicker 關閉 ,會造成 modal也會被關閉.


 

這個大概是事件冒泡造成的.

解決辦法:

  1 <form id="userForm"  class="form-horizontal">
  2     <input type="hidden"  name="id" id="id" />
  3     <div class="modal-header">
  4         <button type="button" class="close" onclick="base.winClose()">&times;</button>
  5         <h4 class="modal-title" id="myModalLabel">添加用戶</h4>
  6     </div>
  7     <div class="modal-body">
  8         <div class="form-group">
  9             <label class="col-sm-2 control-label">用戶名:</label>
 10             <div class="col-sm-6">
 11                     <input type="text" class="form-control" id="userName" name="userName" placeholder="請輸入名稱"  />
 12 
 13             </div>
 14         </div>
 15         <div class="form-group">
 16             <label class="col-sm-2 control-label">請選擇</label>
 17             <div class="col-sm-6">
 18                 <div class="radio">
 19                     <label>
 20                         <input type="radio" name="sex" value="0" checked> 21                     </label>
 22                 </div>
 23                 <div class="radio">
 24                     <label>
 25                         <input type="radio" name="sex" value="1"> 26                     </label>
 27                 </div>
 28             </div>
 29         </div>
 30         <div class="form-group">
 31             <label class="col-sm-2  control-label" for=test>選擇列表</label>
 32             <div class="col-sm-6">
 33                 <select id="test" name="test" class="form-control">
 34                     <option value="">請選擇</option>
 35                     <option value="1">1</option>
 36                     <option value="2">2</option>
 37                     <option value="3">3</option>
 38                     <option value="4">4</option>
 39                     <option value="5">5</option>
 40                 </select>
 41             </div>
 42         </div>
 43         <div class="form-group">
 44             <label class="col-sm-2 control-label" for="password">密碼:</label>
 45             <div class="col-sm-6">
 46                 <input class="form-control" id="password" name="password" type="password" />
 47             </div>
 48         </div>
 49         <div class="form-group">
 50             <label class="col-sm-2 control-label" for="confirm_password">確認密碼:</label>
 51             <div class="col-sm-6">
 52                 <input class="form-control" id="confirm_password" name="confirm_password" type="password" />
 53             </div>
 54         </div>
 55         <div class="form-group">
 56             <label class="col-sm-2 control-label" for="email">E-Mail:</label>
 57             <div class="col-sm-6">
 58                 <input class="form-control" id="email" name="email" />
 59             </div>
 60         </div>
 61         <div class="form-group">
 62             <label class="col-sm-2 control-label" for="phone">手機號碼:</label>
 63             <div class="col-sm-6">
 64                 <input class="form-control" id="phone" name="phone" />
 65             </div>
 66         </div>
 67         <div class="form-group">
 68             <label class="col-sm-2 control-label" for="birthday">生日:</label>
 69             <div class="col-sm-6">
 70                 <input class="form-control" id="birthday" name="birthday" />
 71             </div>
 72         </div>
 73         <div class="form-group">
 74              <label class="col-sm-2 control-label">最小和最大文件的大小</label>
 75              <div class="col-sm-6">
 76                  <input type="file" class="form-control" name="fourthFile" />
 77                   <span class="help-block">選擇一個pdf文件大小1米和10米之間.</span>
 78              </div>
 79         </div>
 80        <div class="form-group">
 81              <label for="dtp_input1" class="col-md-2 control-label">時間</label>
 82              <div class="input-group date form_datetime col-md-5" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
 83                 <input class="form-control" size="16" type="text" value="" readonly>
 84                 <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
 85                 <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
 86             </div>
 87             <input type="hidden" id="dtp_input1" value="" />
 88             <script type="text/javascript">
 89                  base.get('.form_datetime').datetimepicker({
 90                     language:  'zh',
 91                     weekStart: 1,
 92                     todayBtn:  1,
 93                     autoclose: 1,
 94                     todayHighlight: 1,
 95                     startView: 2,
 96                     forceParse: 1,
 97                     showMeridian: 1,
 98                     pickerPosition:'top-right'
 99                 }).on('hide', function(event) { 100  event.preventDefault(); 101  event.stopPropagation(); 102  }); 103             </script>
104        </div>
105 
106     </div>
107     <div class="modal-footer">
108         <button type="button" class="btn btn-default" onclick="base.winClose()">關閉</button>
109         <button type="button" class="btn btn-primary" onclick="base.addUser()">提交更改</button>
110     </div>
111 </form>

 

主要就是圖中紅色部分: 99--> 102行

 1                  base.get('.form_datetime').datetimepicker({
 2                     language:  'zh',
 3                     weekStart: 1,
 4                     todayBtn:  1,
 5                     autoclose: 1,
 6                     todayHighlight: 1,
 7                     startView: 2,
 8                     forceParse: 1,
 9                     showMeridian: 1,
10                     pickerPosition:'top-right'
11                 }).on('hide', function(event) {
12                     event.preventDefault();
13                     event.stopPropagation();
14                 });

 

 

參考鏈接:

 

https://github.com/uxsolutions/bootstrap-datepicker/issues/50

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM