日期范围选择器清除UI日期选择器所选日期

Question

下面的示例Daterangepikcer运行良好。仅清除日历时出现问题。当我点击clear按钮时，它只是清除输入字段为空。但是我想清除第一次打开时看到的日期范围选择器日历。

我试过了，但没有清除选定的日期。提前感谢。

$(this).val('');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="http://www.daterangepicker.com/daterangepicker.js"></script>
<link href="http://www.daterangepicker.com/daterangepicker.css" rel="stylesheet"/>


<input type="text" name="datefilter" value="" />
<script type="text/javascript">
$(function() {
$('input[name="datefilter"]').daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});
$('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
});
</script>

Answer 1

最初，当输入为空并且要选择一个范围时，当前日期显示为蓝色。您可以使用以下代码复制此行为：

$('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
$('input[name="datefilter"]').data('daterangepicker').setStartDate(moment());
$('input[name="datefilter"]').data('daterangepicker').setEndDate(moment());
});

当按下Clear(清除(按钮时，输入将为空。

如果单击输入以选择一个范围，则当天将再次显示为蓝色(不会显示以前的范围(。