xdsoft DateTimePicker选中非整点时间时高亮异常求助

API 探路者

2026-5-22

解决DateTimePicker非整点时间选中时整点高亮的问题

这个问题是xdsoft DateTimePicker的默认行为导致的——组件会自动高亮选中时间对应的整点，哪怕你选的是该整点内的其他细分时间，这确实容易让用户混淆。下面提供两个可行的解决方案：

方案一：用CSS覆盖默认高亮样式

最直接的方式是通过自定义CSS，只保留你真正选中的时间项的高亮效果，取消默认的整点高亮：

/* 移除非选中状态的整点高亮样式 */
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_highlighted:not(.xdsoft_current) {
    background-color: transparent;
    color: inherit;
    /* 如果还有其他样式比如边框，也可以在这里重置 */
    border: none;
}

原理说明

组件给高亮的整点元素添加了.xdsoft_highlighted类，而选中的时间项会额外带有.xdsoft_current类。上面的CSS会筛选出不是当前选中项的高亮元素，重置它们的背景色和文字颜色，让它们和普通时间项看起来一致，只保留你选中的时间点的高亮状态。

方案二：通过组件事件手动清除多余高亮

如果CSS方案不生效（比如组件版本不同类名有变化），可以利用组件的onSelect事件，在选中时间后手动移除无关的高亮标记：

$('#DateOfAppointment').datetimepicker({
    format: 'd/m/Y H:i',
    minDate: 0,
    inline: true,
    allowTimes: ['9:00', '9:30', '15:00', '17:00', '17:05', '17:20', '19:00', '20:00'],
    onSelect: function(dateText, inst) {
        // 清除所有非选中项的高亮类
        $('.xdsoft_highlighted').not('.xdsoft_current').removeClass('xdsoft_highlighted');
    }
});