javascript - Bootstrap Datepicker 不清除日期范围

Question

我正在使用这个 datepicker (版本 1.6.1) 在项目中。我有一个按钮可以清除表单中的所有输入和 according to the documentation , 我需要做的就是

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

这适用于单个日期选择器字段，但不适用于日期范围。

$(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>

这是一个 Fiddle如果您更喜欢在那边调试。

Answer 1

因为您在 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>