我有这个Date Range Picker代码:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script type="text/javascript">
$(function() {
$('input[name="datefilter"]').daterangepicker({
autoApply: true,
timePicker: true,
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>
</head>
<body>
<input type="text" name="datefilter" value="" />
</body>
</html>
特别强调这一行:
autoApply: true
根据本网站:http://www.daterangepicker.com/说:
autoApply: (true/false) Hide the apply and cancel buttons, and automatically apply a new date range as soon as two dates are clicked.
但结果 1) 的日期时间选择器仍然有两个按钮(Cancel 和 Apply)并且 2) 在单击两个日期时不应用更改:
在写问题时:
我注意到，当我删除 timePicker: true 时，会发生所需的 autoApply 行为(Cancel 和 Apply选择日期后按钮消失，日期选择器关闭):
那么为什么 autoApply 在启用 timePicker 时不起作用？我需要这两个功能。
最佳答案
不支持该选项组合。如果您在他们单击两个日期后立即“自动应用”，您将在他们实际做出选择之前让界面消失，因为他们还没有选择他们想要的时间。需要一个按钮来表示他们已完成选择，这可能需要以各种顺序进行多达 8 次选择/点击。您只能“自动应用”没有时间的日期范围，因为一旦他们选择了两个日期，您就知道他们已经完成了。
关于javascript - 日期范围选择器自动应用 :true doesn't work with timePicker: true，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54697381/