bootstrap-datepicker隐藏时触发bootstrap的modal的隐藏事件,调用时触发modal的显示事件

使用bootstrap的datepicker插件,设置了选择日期后,自动隐藏弹出框。但是选中的日期值却无法显示在input框中。

因为代码中,当modal隐藏时,会进行Modal中的form表单清空操作。

在自动关闭选择器后,会触发'show.bs.modal' 与 'hide.bs.modal' 事件;此处问题是在调用了 autoclose时,进而调用了bootstrap-datetimepicker.js中的hide方法,然后里面内容会被重置。

而使用了日期控件,并选择日期,在日期控件隐藏的时候,因为出发modal的隐藏事件,就把modal中的内容也清除了。
因为在datepicker隐藏时,会触发modal的隐藏事件,只是触发,modal不会隐藏。

解决方法如下:

//datepicker初始化操作,设置格式、高亮显示今日、自动隐藏等等 
$('#add_time_1').datepicker({
        todayHighlight: true,
        autoclose: true,
        format: 'yyyy-mm-dd'
    });


//如下代码,解决隐藏日期框时,会同步触发modal隐藏事件的问题
    $('#add_time_1').datepicker().on('changeDate', function (ev) {
        
    }).on('hide', function (event) {
        event.preventDefault();
        event.stopPropagation();
    });

当调用datepicker时,触发modal的显示事件问题:

    $('#time_1').datepicker({
        todayHighlight: true,
        autoclose: true,
        format: 'yyyy-mm-dd'
    });
    // 解决datepicker触发modal隐藏事件的问题
    $('#time_1').datepicker().on('changeDate', function (ev) {
        //
    }).on('hide', function (event) {
        event.preventDefault();
        event.stopPropagation();
    });
    //结局datepicker触发modal显示事件的问题
    $('#time_1').datepicker().on('changeDate', function (ev) {
        //
    }).on('show', function (event) {
        event.preventDefault();
        event.stopPropagation();
    });

 

 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值