如何清除 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);

问题是，我如何清除该字段的内容，因为它是只读的并且日期选择器的界面上没有按钮可以这样做？

在dararange picker的官方网站上，他们不知何故提供了一个小的解决方案，即当点击'Cancel'按钮时，你可以附加一个清除日期字段的事件。

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

但这不是我打算做的。清除和取消以及有效操作。那么现在，我该怎么做呢？

Answer 1

我就是这样做的 it:I 在现有范围的顶部添加了一个名为 "None" 的范围，单击它会清除该字段。传递给范围的值是两个空值，在 cb 函数（或您用来操作该字段的任何函数）上，我检查传递的日期是否有效，如果失败，我将清除该字段（ Not Valid 表示传递了 Null，或者单击了 "None"。）。

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

如何清除 Bootstrap DateRangePicker 字段的输入

How to Clear Input for Bootstrap DateRangePicker Field

bootstrap-daterangepicker