bootstrap-datepicker相关问题解决

最新推荐文章于 2025-12-01 05:20:01 发布

原创最新推荐文章于 2025-12-01 05:20:01 发布 · 4.9k 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

1 篇文章

订阅专栏

本文针对DatePicker组件使用过程中遇到的问题提供了解决方案，包括调整z-index处理显示问题、启用autoclose功能及配合bootstrapValidator进行有效性验证的方法。

问题一：modal中无法显示datepicker

原因：这是z-index导致的，可直接添加.datepicker{z-index:9999}，如果无效，说明z-index是通过datepicker.js中代码生成的，找到关于z-index的代码，注释掉。

问题二：datepicker设置了autoclose却没有效果

方案：先检查datepicker.js源码中是否有autoclose，如果没有，到官网下载最新的版本。

问题三：bootstrapValidator无法检查datepicker选择的时间

方案：添加changDate和show事件，具体如下

$('.datepicker')
.datepicker({
format: 'yyyy-mm-dd',
weekStart: 1,
todayHighlight: true,
autoclose: true,
})
.on('changeDate show', function(e) {
$('#form-XXX')
.data('bootstrapValidator')
.updateStatus('start_time', 'NOT_VALIDATED', null)
.validateField('start_time'); //start_time为input的name值
});