如何在Bootstrap datepicker中实现指定日期高亮

核心问题说明 #

setDate是Bootstrap datepicker的实例调用方法，不属于初始化配置项，这是你之前配置不生效的核心原因。另外你配置的日期格式YYYY-MM-DD不符合组件规范，也会导致日期匹配异常，组件的年、月、日格式符需使用小写yyyy-mm-dd。

方案1：初始化时固定绑定指定日期 #

适用于页面加载时就可以从其他系统获取到目标日期的场景，初始化后调用setDate方法即可：

const picker = ele.datepicker({
    autoclose: true,
    keyboardNavigation: false,
    todayHighlight: true,
    format: 'yyyy-mm-dd',
    clearBtn: true,
});
// 设置目标日期，会自动填充到输入框，打开弹窗时自动定位到对应月份并高亮该日期
picker.datepicker('setDate', '2021-10-13');

方案2：点击弹窗时动态设置指定日期 #

适用于需要每次点击输入框时，才从其他系统实时拉取目标日期的场景，绑定show事件处理即可：

const picker = ele.datepicker({
    autoclose: true,
    keyboardNavigation: false,
    todayHighlight: true,
    format: 'yyyy-mm-dd',
    clearBtn: true,
}).on('show', function() {
    // 此处替换为你从其他系统获取目标日期的逻辑
    const targetDate = '2021-10-13';
    picker.datepicker('setDate', targetDate);
});

方案3：仅弹窗定位高亮，不自动填充输入框 #

如果你不需要把目标日期自动填充到输入框，只需要打开弹窗时默认定位到2021年10月、高亮13日供用户选择，可以使用如下配置：

ele.datepicker({
    autoclose: true,
    keyboardNavigation: false,
    todayHighlight: true,
    format: 'yyyy-mm-dd',
    clearBtn: true,
    // 配置默认打开的视图日期
    defaultViewDate: {
        year: 2021,
        month: 9, // 组件月份从0开始计数，10月对应数值9
        day: 13
    },
    // 自定义高亮指定日期
    beforeShowDay: function(date) {
        const targetDate = new Date(2021,9,13);
        if (date.getTime() === targetDate.getTime()) {
            return {
                classes: 'active highlight'
            };
        }
        return {};
    }
});

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