CODEWITHSUNDEEP
javascriptjquerybootstrap-daterangepicker
Tango
Tango

Reputation: 396

Date Range Picker - 24 Hours Range Select

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?

Upvotes: 2

Views: 3115

Answers (1)

Miguel Coder
Miguel Coder

Reputation: 1952

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.

Upvotes: 2

Related Questions