I'm using a datepicker for Twitter Bootstrap. I need to disable the current day from being selected, which means it also should not highlight the current date.

I've passed in the parameter "todayHighlight" as false, but it's still giving the TD the "active" class even though it also has "disabled".

$("#datepicker").datepicker({
    format: 'mm-dd-yyyy',
    daysOfWeekDisabled: [0,6],
    startDate: '02-04-2013',
    endDate: '02-16-2013',
    todayHighlight: false
});

It appears to be a bug in the script. Can anyone help me out and tell me how to fix it?

Here's my fiddle that shows a working example.

I'm using a datepicker for Twitter Bootstrap. I need to disable the current day from being selected, which means it also should not highlight the current date.

I've passed in the parameter "todayHighlight" as false, but it's still giving the TD the "active" class even though it also has "disabled".

$("#datepicker").datepicker({
    format: 'mm-dd-yyyy',
    daysOfWeekDisabled: [0,6],
    startDate: '02-04-2013',
    endDate: '02-16-2013',
    todayHighlight: false
});

It appears to be a bug in the script. Can anyone help me out and tell me how to fix it?

Here's my fiddle that shows a working example.

• javascript
• twitter-bootstrap
• parameters
• datepicker

• todayHighlight is false by default – Tomas Ramirez Sarduy Commented Feb 2, 2013 at 3:49

2 Answers 2

Just add this to your css file to reset the .active default style, is not a good idea change the bootstrap css directly:

.datepicker table tr td.active:hover, 
.datepicker table tr td.active:hover:hover, 
.datepicker table tr td.active.disabled:hover, 
.datepicker table tr td.active.disabled:hover:hover, 
.datepicker table tr td.active:active, 
.datepicker table tr td.active:hover:active, 
.datepicker table tr td.active.disabled:active, 
.datepicker table tr td.active.disabled:hover:active, 
.datepicker table tr td.active.active, 
.datepicker table tr td.active:hover.active, 
.datepicker table tr td.active.disabled.active, 
.datepicker table tr td.active.disabled:hover.active, 
.datepicker table tr td.active.disabled, 
.datepicker table tr td.active:hover.disabled, 
.datepicker table tr td.active.disabled.disabled, 
.datepicker table tr td.active.disabled:hover.disabled, 
.datepicker table tr td.active[disabled], 
.datepicker table tr td.active:hover[disabled], 
.datepicker table tr td.active.disabled[disabled], 
.datepicker table tr td.active.disabled:hover[disabled]{
        background-image: none;
        background-color: white;
        font-weight: normal;
        color: black;
        text-shadow: none;
    }

Just add setDate to null, That's how I have solved my issue

$("#datepicker").datepicker({
    format: 'mm-dd-yyyy',
    daysOfWeekDisabled: [0,6],
    startDate: '02-04-2013',
    endDate: '02-16-2013',
    todayHighlight: false
}).datepicker("setDate",null);

Hope it helps