Могу ли я добавить входной номер для выбора диапазона дат, чтобы настроить дату окончания?

Как показано на прикрепленном изображении, у меня есть средство выбора диапазона дат для регистрации и выезда из отеля, я мог рассчитать количество ночей по разнице между регистрацией и выездом.

Я хочу, чтобы дата выезда зависела от поля ввода количества ночей, чтобы увеличить или уменьшить даты выезда.

Спасибо.

код:

$(function() {
  $('#client_duration').daterangepicker({
    "autoApply": true,
    "opens": "center", 
    locale: {format: 'DD/MM/YYYY'}
  },);    
  $('#client_duration').on('apply.daterangepicker', function(ev, picker) {
    $('#client_nights').val(picker.endDate.diff(picker.startDate, "days"));
  });

Изображение HTML-дизайна


javascript date-range daterangepicker bootstrap-daterangepicker
person Mustafa Hashim    schedule 10.06.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Не уверен, что библиотека daterangepicker вообще может это сделать.

Но вот рабочая скрипка для jquery datepicker. Также его идеально использовать для разных входных данных, чтобы вы могли сохранить их отдельно в БД, если это необходимо для целей отчетности, если таковые возникнут позже.

Рабочая демонстрация: https://jsfiddle.net/usmanmunir/57wcjkth/37/

jQuery

$('#date1').datepicker({ dateFormat: 'd/m/yy' });
$('#date2').datepicker({ dateFormat: 'd/m/yy' });

    function addingDate(value) {
     console.log('Yes')
     var date2 = $('#date2').datepicker('getDate');
     var date = new Date( Date.parse( date2 ) ); 
     date.setDate( date.getDate() + 1 );
     var newDate = date.toDateString(); 
     newDate = new Date( Date.parse( newDate ) );
     $('#date2').datepicker('setDate', newDate );

    }

HTML

<input placeholder="CheckIn" id="date1" />

<input placeholder="Checkout" id="date2" />

<input type="number" onchange="addingDate(this.value)" id="total_nights"/>

Надеюсь это поможет.

person Always Helping    schedule 10.06.2020
comment
ваш код хорош, но работает только для увеличения даты. Я не могу уменьшить количество дней. или поставить конкретное число для увеличения. - person Mustafa Hashim; 10.06.2020
comment
Я снова обновил ответ, чтобы вы могли увеличивать и уменьшать дату по своему усмотрению. - person Always Helping; 10.06.2020
comment
Большое спасибо, мистер Усама, я разработал вашу идею кода, чтобы смешать ее с библиотекой выбора диапазона дат, и теперь она работает хорошо. - person Mustafa Hashim; 10.06.2020