Bootstrap Date Picker - "todayhighlight:true" Not Working

I am using bootstrap - date picker (js and css). Following is the code, unable to figure out the error. Date component gets displayed but any rules that are written inside the scri

Solution 1:

Use html data attributes or add it from datepicker javascript properties. Don't mixup both.

Fiddle: http://jsfiddle.net/hous9y5L/246/

You forgot the double quotes for startDate and endDate

HTML:

<div id="sandbox-container"class="input-group date">
  <inputtype="text"class="form-control "><divclass="input-group-addon"><spanclass="glyphicon glyphicon-th"></span></div></div>

Javascript

$('#sandbox-container.input-group.date').datepicker({
    todayHighlight: true,
    format: "dd/mm/yyyy",
    startDate: "-7d",
    endDate: "+3d"
});

or you can do this way:

Fiddle : http://jsfiddle.net/hous9y5L/248/

<div id="sandbox-container"class="input-group date" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-start-date="-7d" data-date-end-date="+3d" data-date-today-highlight="true">
  <input type="text"class="form-control ">
  <div class="input-group-addon">
    <span class="glyphicon glyphicon-th"></span>
  </div>
</div>

Solution 2:

You have both data-provide="datepicker" and $('#sandbox-container.input-group.date').datepicker(); in the same html page. That's redundant.

Try

$('#sandbox-container.input-group.date').datepicker({
    todayHighlight: true,
});

Or (shouldn't use both)

<div id="sandbox-container" class="input-group date" data-provide="datepicker" data-date-today-highlight>
    Your content here
</div>

Also check the browser console for other errors, like: startDate must be "-7d" instead of -7, endDate must be "+3d" instead of +3

format:"dd/mm/yyyy",
startDate:"-7d",
endDate:"+3d",
todayHighlight:true