when datepicker class is used in input field, bootstrap datepicker (autoclose,endDate,startDate) doesn't work

Question

the following code is not working if I add datepicker in the input field class

JS

$(document).ready(function () {
  $("#ActionDateInput").datepicker({
    autoclose: true,
    endDate: new Date()
  });
});            

HTML

<input type="text" id="ActionDateInput" class="datepicker form-control" placeholder="Date" name="date" autocomplete="off"/>

But if I remove datepicker from the class, it works.
HTML

<input type="text" id="ActionDateInput" class="form-control" placeholder="Date" name="date" autocomplete="off"/>

I want to keep the datepicker in the class for design purpose. I used bootstrap-datepicker

<script src="${contextPath}/resources/asset/js/bootstrap-datepicker.js"></script> 

Answer 1

The datepicker class is used by the bootstrap-datepicker plugin. If you download the plugin's sources, in the bootstrap-datepicker.css file you can see that there is styling applied to the mentioned class and on some children elements of it. That is why everything works fine when you either not use it or when you rename it.

Thus, I would strongly recommend you NOT to use the datepicker class since it is used by the plugin internally.

Answer 2

Try it:

 $("#ActionDateInput").datepicker().datepicker("setEndDate",new Date());