I am using bootstrap - date picker (js and css).

Following is the code, unable to figure out the error. Date ponent gets displayed but any rules that are written inside the script is not getting executed. some listed below.

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

FULL CODE:

<script>
$('#sandbox-container.input-group.date').datepicker({
todayHighlight: true
});
</script>

<div id="sandbox-container" class="input-group date" data-provide="datepicker">
<input type="text" class="form-control ">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>

I am using bootstrap - date picker (js and css).

Following is the code, unable to figure out the error. Date ponent gets displayed but any rules that are written inside the script is not getting executed. some listed below.

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

FULL CODE:

<script>
$('#sandbox-container.input-group.date').datepicker({
todayHighlight: true
});
</script>

<div id="sandbox-container" class="input-group date" data-provide="datepicker">
<input type="text" class="form-control ">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>

• javascript
• css
• twitter-bootstrap
• bootstrap-datepicker

2 Answers 2

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

Fiddle: http://jsfiddle/hous9y5L/246/

You forgot the double quotes for startDate and endDate

HTML:

<div id="sandbox-container" class="input-group date">
  <input type="text" class="form-control ">
  <div class="input-group-addon">
    <span class="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/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>

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