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

Question

I am using the Date Range Picker plugin for bootstrap and I need to enable date time range to be maximum of 24 hours.

The following example allows me to select the date range:

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

Upon selecting a start date and time, the end date should be 24 hours from the start date and time. (Limit the end date and time to 24 hours from start date time)

How can I achieve this using the plugin?

Answer 1

I would create an event listener for oninput that tests the enddate against the startdate unix timestamp and then if it's greater revert it to 24 hours from the time entered. Snippet coming soon...

 $('#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"> 

EDIT: bootstrap daterangepicker already has a built in feature for this functionality.