如何不引入jQuery UI监听django-bootstrap-datepicker-plus日期变更

问题说明 #

使用django-bootstrap-datepicker-plus包时，尝试通过jQuery监听日期变更事件以弹出提示，但标准的change事件无法触发。引入jQuery UI虽能解决，但会导致页面出现两个日期选择器，需要找到无需依赖jQuery UI的解决方案。

解决方案 #

bootstrap-datepicker组件本身提供了专属的changeDate事件，无需依赖jQuery UI即可监听日期变更。

步骤1：确认依赖加载顺序 #

确保页面按以下顺序加载依赖（django-bootstrap-datepicker-plus通常会自动引入，但需确认）：

• jQuery
• Bootstrap JS
• bootstrap-datepicker JS

步骤2：编写监听代码 #

在页面中添加以下JavaScript代码，监听日期选择器的changeDate事件：

$(document).ready(function() {
    // 替换为你的日期输入框ID，这里对应表单字段DOB的渲染ID
    $('#id_DOB').on('changeDate', function(e) {
        // 日期变更后的逻辑，示例为弹出提示框
        alert('日期已修改为：' + e.format('dd/mm/yyyy'));
        
        // 若需触发标准change事件（如表单验证等场景），可手动触发
        $(this).trigger('change');
    });
});

关键说明 #

• changeDate是bootstrap-datepicker的原生事件，当用户选择日期、通过控件调整日期时都会触发，无需依赖jQuery UI。
• 若你的业务逻辑依赖标准的change事件，可在changeDate回调中手动调用trigger('change')来同步触发。
• 确认目标元素ID：Django表单字段渲染后的input ID默认是id_字段名，这里对应id_DOB，需与实际渲染的HTML一致。

注意事项 #

• 脚本需在DOM加载完成后执行，推荐放在页面底部或包裹在$(document).ready()中。
• 禁止同时引入jQuery UI，避免与bootstrap-datepicker冲突产生两个日期选择器。

内容的提问来源于stack exchange，提问作者Nick