How to highlight and enable only specific weekdays in Tempus Dominus Bootstrap-4 datetime picker?

Question

I am using Tempus Dominus Bootstrap-4 datetime picker I am initializing it like this:-

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

I need to enable particular weekdays and highlight them. How can I do that?

Did you find solution to this by any chance? – Peon Apr 26 '20 at 12:11 — Peon, Apr 26 '20 at 12:11

score -1 · Answer 1 · answered Oct 16 '19 at 14:24

To enable only certain weekdays, you can use the daysOfWeekDisabled option to disable any weekdays that you don't want enabled, and thus enable the ones you don't include in your list. For instance, to disable weekends, add daysOfWeekDisabled: [0, 6] to your datetimepicker options:

 $(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]
   });
 });

As for highlighting the enabled days, you can apply a custom CSS rule to change the background-color on the day elements that are not disabled and not active like so:

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

This assumes that your HTML has a certain structure, but you can mess around in the Chrome inspector and copy the CSS selector for the day elements to make it work in your setup.

I've created a JSFiddle as a demo that shows how this looks. Hope this helps!

How to highlight and enable only specific weekdays in Tempus Dominus Bootstrap-4 datetime picker?

1 Answers1