Question

我正在使用Tempus Dominus Bootstrap-4 datetime picker 我正在这样初始化它：-

$("div[id*='BookingDate']").datetimepicker({
        inline: true,
        sideBySide: true,
        format: 'L',
        allowMultidate: true,
        viewDate: moment('2019-08-10', 'YYYY/MM/DD'),
        minDate:new Date('2019-06-20'),
        maxDate:new Date('2024-06-20'),
});

我需要启用特定的工作日并突出显示它们。我该怎么办？

Answer 1

要仅启用某些工作日，可以使用daysOfWeekDisabled选项禁用不需要启用的任何工作日，从而启用那些不包含在列表中的工作日。例如，要禁用周末，请将daysOfWeekDisabled: [0, 6]添加到您的datetimepicker选项中：

 $(function() {
   $('#datetimepicker1').datetimepicker({
            inline: true,
        sideBySide: true,
        format: 'L',
        allowMultidate: true,
        viewDate: moment('2019-08-10', 'YYYY/MM/DD'),
        minDate:new Date('2019-06-20'),
        maxDate:new Date('2024-06-20'),
        daysOfWeekDisabled: [0, 6]
   });
 });

关于突出显示已启用的日期，您可以应用自定义CSS规则来更改未禁用且未激活的日期元素上的background-color，如下所示：

#datetimepicker1 > div > ul > li.show > div > div.datepicker-days > table > tbody > tr > td:not(.disabled):not(.active) {
    background-color: #7abaff;
}

这假设您的HTML具有特定的结构，但是您可以在Chrome检查器中弄乱它，并复制day元素的CSS选择器以使其在设置中正常工作。

我已经创建了一个JSFiddle作为演示，演示了它的外观。希望这会有所帮助！

如何在Tempus Dominus Bootstrap-4日期时间选择器中仅突出显示和启用特定工作日？

1 个答案: