使用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();
});