CODEWITHSUNDEEP
javascriptjqueryhtmldatepicker
dokgu
dokgu

Reputation: 6040

Bootstrap Datepicker not clearing for date range

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.

Upvotes: 3

Views: 1459

Answers (1)

vinayakj
vinayakj

Reputation: 5681

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>

Upvotes: 2

Related Questions