Bootstrap datetimepicker步进异常：步长45分钟时小时错误跳转

这个问题我之前也碰到过！本质是这款datetimepicker的默认步进逻辑有计算漏洞：当你设置stepping:45时，插件处理分钟累加时，没有正确计算超过60分钟后的剩余分钟数，反而错误地保留了步进值（45），同时直接给小时加1，导致12:45点击增加后变成01:45，而非预期的01:30。

解决方案1：自定义时间修正逻辑 #

我们可以通过监听dp.change事件，手动修正时间计算，确保分钟数按照累加45后的正确模60结果显示：

$("#startDate").datetimepicker({ 
    format:'YYYY/MM/DD HH:mm', 
    locale: g_state_language, 
    useCurrent: false, 
    stepping: 45, 
    defaultDate: false, 
    sideBySide:true 
})
// 保存初始日期，用于判断是增加还是减少操作
.on('dp.show', function(e) {
    const picker = $(this).data('DateTimePicker');
    $(this).data('prevDate', picker.date().clone());
})
.on('dp.change', function(e) {
    const picker = $(this).data('DateTimePicker');
    const currentDate = e.date.clone();
    const prevDate = $(this).data('prevDate');
    
    if (!prevDate) return;
    
    // 判断操作类型：增加或减少
    const isIncrement = currentDate.isAfter(prevDate);
    let totalMinutes = prevDate.hours() * 60 + prevDate.minutes();
    
    // 调整总分钟数
    totalMinutes += isIncrement ? 45 : -45;
    
    // 计算正确的小时和分钟
    const newHours = Math.floor(totalMinutes / 60);
    const newMinutes = totalMinutes % 60;
    
    // 处理负数分钟（减少操作时可能出现）
    const correctedDate = prevDate.clone()
        .hours(newHours < 0 ? newHours + 24 : newHours)
        .minutes(newMinutes < 0 ? newMinutes + 60 : newMinutes);
    
    // 修正日期并更新保存的上一次日期
    picker.date(correctedDate);
    $(this).data('prevDate', correctedDate.clone());
});

解决方案2：升级插件版本 #

如果你用的是旧版的eonasdan-bootstrap-datetimepicker，这个步进计算的bug可能已经在新版本中修复。可以尝试更新到最新稳定版，看看是否能直接解决问题。

验证效果 #

设置完成后，测试时间序列会符合预期：

• 12:00 → 12:45（正常）
• 12:45 → 01:30（正确进位）
• 01:30 → 02:15
• 02:15 → 03:00
  以此类推，完全符合45分钟步进的逻辑。

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