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

Share Improve this question Follow asked Feb 1, 2013 at 18:03 CofeyCofey 11.4k1616 gold badges5454 silver badges7575 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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