Как очистить ввод для Bootstrap Поле DateRangePicker

Question

Использует плагин Bootstrap DateRangePicker JQuery, и чтобы помочь справиться с проблемами ввода вручную, я сделал поле даты только для чтения и использовал для него созданные диапазоны, из которых пользователь должен выбрать тот, который им нужен , Что-то вроде этого ..

// set datepicker 
    function cb(start, end) { 
      $('#daterange input').val(start.format('Do MMM YYYY') + ' - ' + end.format('Do MMM YYYY')); 
    } 

    $('#daterange').daterangepicker({ 
     autoApply: true, 
     autoUpdateInput:true, 
     ranges: [ 
      'Today': [moment(), moment()], 
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 
      'This Week': [moment().startOf('week'), moment()], 
      'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
      'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
      'This Month': [moment().startOf('month'), moment().endOf('month')], 
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] 
     } 
    }, cb); 

Проблема в том, как очистить содержимое поля, учитывая, что это только для чтения, и нет кнопки для этого существует на интерфейсе DatePicker?

На официальном сайте dararange picker они каким-то образом предоставляют небольшое решение, которое заключается в том, что при нажатии кнопки «Отмена» вы можете присоединить событие, которое очищает поле даты.

$('#daterange').daterangepicker({ 
locale: { cancelLabel: 'Clear' } 
}); 
$('#daterange').on('cancel.daterangepicker', function(ev, picker) { 
    //do something, like clearing an input 
    $('#daterange').val(''); 
}); 

Но это не то, что я намереваюсь сделать. И Очистить, и Отменить и действительные действия. Итак, как мне это сделать?

Answer 1

Вот как я это сделал: я добавил диапазон под названием «Нет» в верхней части существующих диапазонов, который при щелчке очищает поле. Значения, переданные в диапазон, равны двум нулевым значениям, а в функции cb (или любой другой функции, которую вы используете для манипулирования этим полем) я проверяю, действительно ли прошедшая дата действительна, сбой, с которой я очищаю поле (Not Valid означает Null , или «Ничего» не было нажата.).

<script> 
// set datepicker 
    function cb(start, end) { 
     if(start._isValid && end._isValid) 
     { 
      $('#daterange input').val(start.format('Do MMM YYYY') + ' - ' + end.format('Do MMM YYYY')); 
     } 
     else 
     { 
      $('#daterange input').val(''); 
     } 
    } 

    $('#daterange').daterangepicker({ 
     autoApply: true, 
     autoUpdateInput:true, 
     ranges: { 
      'None': [null,null], 
      'Today': [moment(), moment()], 
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 
      'This Week': [moment().startOf('week'), moment()], 
      'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
      'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
      'This Month': [moment().startOf('month'), moment().endOf('month')], 
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] 
     } 
    }, cb); 
</script>