Bootstrap date picker disabled css not working

Question

I am using bootstrap datepicker. I have set the minimum date of datepicker to the current date.Its working fine and i can choose dates starting only from the current date.The problem is although previous dates are disabled user cannot differentiate between the active date and disabled dates(he can do so only by hovering over the respective dates).

How can I make the disabled dates to fade so that user can understand merely by selecting the datepicker.

 $('.dueDate').datepicker({
        autoclose: true,
        startDate: '+0d', // set default to today's date  
        datesDisabled:??//How can I set this option         
    })

Answer 1

You can use the startDate field to specify when you want the calendar to start, which should by default make the disabled dates look faded / unselectable.

You can also make certain days of the week disabled, like the weekends by using daysOfWeekDisabled.

For Example:

 $("#datepicker").datepicker({
     startDate: "dateToday",
     daysOfWeekDisabled: "0,6",
     todayHighlight: true,
 })

---

Edit:

If that isn't working, it may be an issue with your css.

You could add something like this below (which should have been in your bootstrap-datepicker3.css file by default):

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  background: none;
  color: #999999;
  cursor: default;
}