Bootstrap Datepicker未清除日期范围

Question

I'm using this datepicker (version 1.6.1) in a project. I have a button that clears all inputs in a form and according to the documentation , all I need to do is

$(".selector").datepicker("clearDates");

This is working fine for a single datepicker field but it doesn't work for a date-range.

 $(document).ready(function() { $(".date").datepicker({ todayBtn: "linked", daysOfWeekHighlighted: "0,6", autoclose: true, todayHighlight: true, orientation: "bottom", format: "mm/dd/yyyy" }); $(document).on("click", "button", function(e) { e.preventDefault(); $(".date").datepicker("clearDates"); }) }); 

 body { padding: 20px; } .input-group { margin-bottom: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class='input-group date'> <input name='single' class='single basic-input form-control' placeholder='MM/DD/YYYY' autocomplete='off'> <div class='input-group-addon'><span class='glyphicon glyphicon-calendar'></span></div> </div> <div class='input-group input-daterange date'> <input name='start' class='start basic-input form-control' placeholder='MM/DD/YYYY' autocomplete='off'> <div class='input-group-addon'>to</div> <input name='end' class='end basic-input form-control' placeholder='MM/DD/YYYY' autocomplete='off'> </div> <button id='clear-params' type='button' class='btn btn-warning btn-block' aria-label='Clear'> <span>Clear</span> </button> 

Here's a Fiddle if you prefer to debug over there.

Answer 1

Because you were missing selector classes in daterange

 $(document).ready(function() { $(".date").datepicker({ todayBtn: "linked", daysOfWeekHighlighted: "0,6", autoclose: true, todayHighlight: true, orientation: "bottom", format: "mm/dd/yyyy" }); $(document).on("click", "button", function(e) { e.preventDefault(); $(".dateselector").datepicker("clearDates"); }) }); 

 body { padding: 20px; } .input-group { margin-bottom: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class='input-group date'> <input name='single' class='single basic-input form-control dateselector' placeholder='MM/DD/YYYY' autocomplete='off'> <div class='input-group-addon'><span class='glyphicon glyphicon-calendar'></span></div> </div> <div class='input-group input-daterange date'> <input name='start' class='start basic-input form-control dateselector' placeholder='MM/DD/YYYY' autocomplete='off'> <div class='input-group-addon'>to</div> <input name='end' class='end basic-input form-control dateselector' placeholder='MM/DD/YYYY' autocomplete='off'> </div> <button id='clear-params' type='button' class='btn btn-warning btn-block' aria-label='Clear'> <span>Clear</span> </button>