日期范围选择器 - 24 小时范围选择

Question

我正在使用 Date Range Picker 插件进行引导，我需要将日期时间范围设置为最大 24 小时。

以下示例允许我选择日期范围：

<input type="text" name="daterange" value="" />

<script type="text/javascript">
$(function() {
    $('input[name="daterange"]').daterangepicker({
        timePicker: true,
        timePickerIncrement: 30,
        locale: {
            format: 'MM/DD/YYYY h:mm A'
        }
    });
});
</script>

选择开始日期和时间后，结束日期应为开始日期和时间的 24 小时。 （将结束日期和时间限制为距开始日期时间 24 小时）

如何使用插件实现这一点？

Answer 1

我将为 oninput 创建一个事件侦听器，根据 startdate unix 时间戳测试结束日期，然后如果它更大，则将其恢复为从输入时间开始的 24 小时。代码段即将推出...

$('#demo').daterangepicker({
    "linkedCalendars": false,
    timePicker: true,
    dateLimit: { hours: 24 },
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.css" rel="stylesheet"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>


<input type="text" id="demo">

编辑：bootstrap daterangepicker 已经为此功能提供了内置功能。