Выбор диапазона дат – выбор диапазона за 24 часа

Я использую плагин 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 часов с даты начала)

Как я могу добиться этого с помощью плагина?


javascript jquery bootstrap-daterangepicker
person Tango    schedule 27.09.2017    source источник
comment
Вы хотите, чтобы оно было меньше, больше или равно 24 часам?   -  person Miguel Coder    schedule 27.09.2017
comment
Равно 24 часам. Если дата и время начала — 27.09.2017, 15:40, то дата и время окончания — 28.09.2017, 15:40.   -  person Tango    schedule 27.09.2017

Ответы (1)


arrow_upward
2
arrow_downward

Я бы создал прослушиватель событий для oninput, который проверяет конечную дату по отметке времени unix startdate, а затем, если она больше, возвращает ее на 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 уже имеет встроенную функцию для этой функции.

person Miguel Coder    schedule 27.09.2017
comment
Большое спасибо. Работает отлично. - person Tango; 27.09.2017