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

Question

我正在为 bootstrap 使用 Date Range Picker 插件，我需要将日期时间范围设为最长 24 小时。

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

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

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

如何使用插件实现此目的？

Answer 1

我会为 oninput 创建一个事件侦听器，根据开始日期 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">

编辑：bootstrapdaterangepicker 已经内置了此功能。

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

Date Range Picker - 24 Hours Range Select

javascript

jquery

bootstrap-daterangepicker