Отмена SingleDate

Question

Я использую daterangepicker v3.0.3 и инициализирую все свои входные данные, которые имеют класс .date, где они являются сборщиками единой даты, используя следующий код:

function checkDateInput() {
  var input = document.createElement('input');
  input.setAttribute('type','date');

  var notADateValue = 'not-a-date';
  input.setAttribute('value', notADateValue); 

  return (input.value !== notADateValue);
}

// Check if the browser supports the <input type="date" />
if (checkDateInput()) {
  // Change the types on the inputs that are dates
  $('.date').prop('type', 'date');
} else {
  // Iterate through each <input class="date" ... />
  $.each($('.date'), function(key, value) {
    $(value).daterangepicker({
      drops: "up",
      showDropdowns: true,
      singleDatePicker: true,
    });
  });
}

<!-- jquery -->
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>

<!-- bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<!-- daterangepicker -->
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>

<form>
  <fieldset>
    <legend>Dates</legend>
    <div class="form-group">
      <label for="date_written">Date Written</label>
      <input class="form-control date" id="date_written" name="date_written" required="required" />
    </div>
    <div class="form-group">
      <label for="effective_date">Effective Date</label>
      <input class="form-control date" id="effective_date" name="effective_date" required="required" />
    </div>
    <div class="form-group">
      <label for="cancellation_date">Cancellation Date</label>
      <input class="form-control date" id="cancellation_date" name="cancellation_date" />
    </div>
  </fieldset>
  <button type="submit" class="btn btn-success">Submit</button>
</form>

Проблема, с которой я сталкиваюсь, заключается в том, что если я решу не выбирать дату и щелкнуть вне календаря, она автоматически введет сегодняшнюю дату, а вместо этого я предпочту, чтобы она вообще ничего не вставляла. Я предполагаю, что мне нужно установить autoUpdateInput в False, но я не знаю, как вручную обновить ввод, если дата была выбрана.

Answer 1

Хотя передача обратного вызова в конструктор - это самый простой способ прослушать изменения в выбранном диапазоне дат, вы также можете делать что-то каждый раз, когда нажимаете кнопку «Применить», даже если выбор не изменился

 
function checkDateInput() {
  var input = document.createElement('input');
  input.setAttribute('type','date');

  var notADateValue = 'not-a-date';
  input.setAttribute('value', notADateValue); 
return false;
   
  return (input.value !== notADateValue);
}

// Check if the browser supports the <input type="date" />
if (checkDateInput()) {
  // Change the types on the inputs that are dates
  $('.date').prop('type', 'date');
} else {
  // Iterate through each <input class="date" ... />
  $.each($('.date'), function(key, value) {
    $(value).daterangepicker({
      drops: "auto",
      showDropdowns: true,
      singleDatePicker: true,
       autoUpdateInput: false,        
    }).on('hide.daterangepicker', function(ev, picker) {
       //do something, like clearing an input    
     // $(this).val(''); if you want to clear un comment this
   }).on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('YYYY-MM-DD'));                
   });   
  });
}

<!-- jquery -->
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>

<!-- bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<!-- daterangepicker -->
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>


<div class="container">
<form>
  <fieldset>
    <legend>Dates</legend>
    <div class="form-group">
      <label for="date_written">Date Written</label>
      <input class="form-control date" id="date_written" name="date_written" required="required" />
    </div>
    <div class="form-group">
      <label for="effective_date">Effective Date</label>
      <input class="form-control date" id="effective_date" name="effective_date" required="required" />
    </div>
    <div class="form-group">
      <label for="cancellation_date">Cancellation Date</label>
      <input class="form-control date" id="cancellation_date" name="cancellation_date" />
    </div>
  </fieldset>
  <button type="submit" class="btn btn-success">Submit</button>
</form>
</div>

Answer 2

Если я понимаю требование, решение должно измениться autoUpdateInput: false и обрабатывать как 'apply.daterangepicker', так и 'cancel.daterangepicker'

Я сообщаю только об измененном фрагменте кода ниже

    $.each($('.date'), function(key, value) {

    $(value).daterangepicker({
    drops: "up",
    showDropdowns: true,
    singleDatePicker: true,
    autoUpdateInput: false 
  });

  $(value).on('apply.daterangepicker', function(ev, picker) {
    $(this).val(picker.startDate.format('MM/DD/YYYY')); 
  });

  $(value).on('cancel.daterangepicker', function(ev, picker) {
    $(this).val('');
    });

Кроме того, я думаю, вы должны изменить порядок включения js таким образом:

    <!-- daterangepicker -->
<!-- FR: https://github.com/dangrossman/daterangepicker/issues/320 switched js loading order -->
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.js"></script>
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>