如何重新初始化Bootstrap datetimepicker？解决日期联动失效问题

我看了你的代码，问题出在这几个核心点上：

• 你在keyup blur change mouseup这些事件里反复初始化jobPublishDate的datetimepicker，这不仅没必要，还可能导致组件状态混乱；
• jobCloseDate只在第一次focusin时初始化，之后哪怕date变量变了，已经初始化好的datetimepicker也不会自动更新minDate值，包括你重置StartDate的时候。

下面是修正后的方案，用datetimepicker自带的事件来处理日期变化，确保EndDate的minDate能实时跟着StartDate走：

修正后的JavaScript代码 #

// 初始化StartDate的datetimepicker，只执行一次
$('#jobPublishDate').datetimepicker({
    format: 'DD/MM/YYYY H:mm',
    showTodayButton: true,
    showClear: true,
    showClose: true
});

// 初始化EndDate的datetimepicker，同样只执行一次
$('#jobCloseDate').datetimepicker({
    format: 'DD/MM/YYYY H:mm',
    showTodayButton: true,
    showClear: true,
    showClose: true,
    minDate: null // 初始值设为null，也可根据需求设为当前日期
});

// 监听StartDate的日期变化事件（用datetimepicker原生的dp.change事件）
$('#jobPublishDate').on('dp.change', function(e) {
    var selectedDate = e.date;
    if (selectedDate) {
        // 如果StartDate有选中日期，设置EndDate的minDate为该日期
        $('#jobCloseDate').data('datetimepicker').minDate(selectedDate);
    } else {
        // 如果StartDate被重置（清空），把EndDate的minDate恢复为默认值
        $('#jobCloseDate').data('datetimepicker').minDate(null);
    }
});

对应的HTML代码（无需修改） #

<label>StartDate:</label>
<input ng-model="job.StrPublishDate" id="jobPublishDate">
<br/>
<label>EndDate:</label>
<input ng-model="job.StrCloseDate" id="jobCloseDate">

关键改进点说明： #

• 两个datetimepicker都只初始化一次，避免重复初始化导致的组件状态冲突；
• 使用datetimepicker原生的dp.change事件监听日期变化，比原生的keyup/blur更可靠，能准确捕捉到通过组件界面选择或清空日期的操作；
• 当StartDate被清空（重置）时，主动把EndDate的minDate恢复为默认值，确保EndDate能回到可选择任意日期的状态。

这样修改后，不管你是选择StartDate的日期，还是重置它，EndDate的minDate都会实时更新啦。

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