1

我正在使用Tempus Dominus Bootstrap-4 日期时间选择器 我正在像这样初始化它：-

$("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'),
});

我需要启用特定的工作日并突出显示它们。我怎样才能做到这一点？

4

1 回答 1

-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 检查器中乱七八糟，并复制日期元素的 CSS 选择器以使其在您的设置中工作。

我创建了一个JSFiddle作为演示，展示了它的外观。希望这可以帮助！

于 2019-10-16T14:24:54.057 回答