bootatrsp datetimepicker的初始化和阻止模态窗关闭(事件冒泡)

时间:2019-04-18 09:16:00 来源:互联网 作者: 神秘的大神 字体:

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  

  //设置空间的开始日期 (-2)前天 (-1)昨天 (0)今天 (1)明天 (2)后天
  function setStartDate(addDayCount){
    var dd=new Date();
    dd.setDate(dd.getDate()+addDayCount);
    var y=dd.getFullYear();
    var m=dd.getMouth()+1;//获取当前月份的日期
    var d=dd.getDate();
    return y+"-"+m+"-"+d;

     }

          

    $("#startDate").datetimepicker({//选择年月日

                      startDate:setStartDate(1), //设置选择日期为当天的后一天,前边的不能选择
      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