bootatrsp datetimepicker的初始化和阻止模态窗…

1.github下载资源包  http://www.bootcss.com/p/bootstrap-datetimepicker/

2.引入bootstrap-datetimepicker.min.css和bootstrap-datetimepicker.min.js 

3.中文包  bootstrap-datetimepicker.zh-CN.js

html        

　　<div class="input-group date form_datetime" data-link-field="startDate">
　　<input id="startDate" class="form-control task-form"  name="startDate" placeholder="请选择开始时间" type="text" value="" readonly >
　　　　<span class="input-group-addon">
　　　　　　<span class="fa fa-calender"></span>
　　　　</span>
　　</div>

js　

　　　　$("#startDate").datetimepicker({//选择年月日
　　　　　　format: 'yyyy-mm-dd',
　　　　　　language: 'zh-CN',
　　　　　　weekStart: 1,
　　　　　　todayBtn: 1,//显示‘今日’按钮
　　　　　　autoclose: 1,
　　　　　　todayHighlight: 1,
　　　　　　startView: 2,
　　　　　　minView: 2,  //Number, String. 默认值：0, 'hour'，日期时间选择器所能够提供的最精确的时间选择视图。

　　　　　　clearBtn:true,//清除按钮

　　　　　　forceParse: 0
　　　　}).on('hide',function(event){

                 event.preventDefault();

                event.stopPropagation();//阻止时间冒泡

              });

 

             也可以通过class选择器进行实例化,注意,如果是复合的class样式,只需要取form_datetime即可.

            

　　　$(". form_datetime").datetimepicker({//选择年月日
　　　　　　format: 'yyyy-mm-dd',
　　　　　　language: 'zh-CN',
　　　　　　weekStart: 1,
　　　　　　todayBtn: 1,//显示‘今日’按钮
　　　　　　autoclose: 1,
　　　　　　todayHighlight: 1,
　　　　　　startView: 2,
　　　　　　minView: 2,  //Number, String. 默认值：0, 'hour'，日期时间选择器所能够提供的最精确的时间选择视图。

　　　　　　clearBtn:true,//清除按钮

　　　　　　forceParse: 0
　　　　}).on('hide',function(event){

                 event.preventDefault();

                event.stopPropagation();//阻止时间冒泡

              });

注意:

       在 modal中的 datetimepicker 点击时候 ,会造成 里层modal-dialog也会被关闭.这是大概是因为事件冒泡造成的.在上边标红的地方,就是在datetimepicker实例化的国产中阻止事件的冒泡,点击时间控件时,不会关闭modal  dialog

 

原文链接:https://www.cnblogs.com/zhaosq/p/10724517.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有