Добавить день отправления javascript
Взгляните на следующий код javascript:
// Default calendar namespaces
var dateFormat = "<span class='day'>d</span> <span class='month'>M</span> <span class='year'>yy</span>",
dateArrival = '#dateArrival input',
dateDeparture = '#dateDeparture input',
dateArrivalVal = '#dateArrival .date-value',
dateDepartureVal = '#dateDeparture .date-value';
// Show arrival calendar
$(dateArrival).datepicker({
minDate: 'D',
dateFormat: dateFormat,
// get value on selected date for departure
onSelect: function (txt, inst) {
$(dateDepartureVal).html(txt);
$(dateArrivalVal).html($(dateArrival).val());
},
onClose: function (selectedDate) {
$(dateDeparture).datepicker("option", "minDate", selectedDate);
}
});
// Show departure calendar
$(dateDeparture).datepicker({
minDate: 'D+1',
dateFormat: dateFormat,
// get value on selected date for return
onSelect: function (txt, inst) {
$(dateDepartureVal).html(txt);
$(dateDepartureVal).html($(dateDeparture).val());
}
});
// set current date
$('.datepicker').datepicker('setDate', 'today');
// get current value from departure
$(dateArrivalVal).html($(dateArrival).val());
// get current value from return
$(dateDepartureVal).html($(dateDeparture).val());
Как видите, это виджет бронирования, который отображает текущий день как прибытие, а следующий день как выезд. Однако, когда клиент выбирает другой день для заселения, для выписки устанавливается ТО ЖЕ ДЕНЬ. Что я хочу сделать, так это если для dateArrival выбрано, скажем, 7 июня, dateDeparture автоматически отображает 8 июня (то есть dateArrival + 1 день) вместо отображения той же даты (7 июня). Как это сделать?
Большое спасибо!
Я полностью понимаю, о чем вы, @vogomatix. Есть ли способ изменить дату отъезда только тогда, когда дата прибытия установлена первой?
@RobG: #dateArrival input выбирает все входы внутри #dateArrival, например #dateArrival может быть div, содержащим несколько элементов input.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы могли:
- зарегистрировать событие изменения в дату прибытия, которое устанавливает отправление в D + 1 check jQuery .change ()
- зарегистрировать событие изменения на дату отъезда, которое удаляет предыдущий обработчик, jQuery .off
Но хитрость здесь в том, что ни один метод из datepicker не поможет вам установить +1 день для произвольной даты, поэтому вам нужно напрямую манипулировать вашей форматированной строкой. Я добавил 3 строки, чтобы получить строку +1 дня, и четвертую, которая использует метод datepicker для установки dateDeparture. Он протестирован, поэтому проверьте, работает ли он за вас.
// Show arrival calendar
$(dateArrival).datepicker({
minDate: 'D',
dateFormat: dateFormat,
// get value on selected date for departure
onSelect: function (txt, inst) {
$(dateDepartureVal).html(txt);
$(dateArrivalVal).html($(dateArrival).val());
// ADDED THESE FIVE LINES
var d = new Date((+inst.currentMonth+1) + '/' + inst.currentDay + '/' + inst.currentYear)
var dpo = new Date(d.getTime() + 24*60*60*1000)
var str = "<span class=day>"+dpo.getDate()+"</span> <span class=month>"+(dpo.toDateString().split(' ')[1])+"</span> <span class=year>"+dpo.getFullYear()+"</span>"
$(dateDeparture).datepicker('setDate', str);
$(dateDepartureVal).html(str);
}
// REMOVED USELESS ONCLOSE, SINCE UI IS CLOSED ON SELECT
});
Не могли бы вы указать образец кода? Я мало что знаю о javascript. Спасибо!
Спасибо, @lucchi. По какой-то причине код не будет работать (когда установлена другая дата прибытия, дата отъезда устанавливается на тот же день, а не на следующий день - это то, что я хочу сделать. Забудьте о части «если», не важно, если дата отъезда уже была установлена раньше). Если хотите, посетите proyectohales.com/catedral. Вы можете понять причину, почему? Спасибо!
@Alex На самом деле, когда вы выбираете дату выезда, а затем открываете чек в календаре, она предварительно установлена на D + 1, что является противоположностью того, что вы хотели, также эта дата не была передана в .date-value. Давайте просто исправим это при редактировании.
Спасибо! Это прекрасно работает. Только одно предложение: onclose не бесполезен, потому что не позволяет пользователю выбирать даты, предшествующие прибытию. Но спасибо за код!
@Alex, в качестве предложения вы должны действительно узнать о пользовательском опыте и автоматизмах проектирования, которые служат вашим пользователям, а не вашим потребностям в проверке их данных. И определенно не для того, чтобы помешать им поместить где-то действительный ввод, просто потому, что они поместили другой действительный ввод где-то еще. Теперь, когда вам не нужно больше кода для вашего пользовательского интерфейса, просто подумайте немного о своем UX.
Вы уверены, что хотите это сделать? Иногда люди заполняют формы иррационально и устанавливают дату отъезда до даты прибытия, и наличие чего-то, что меняет дату, которую они могли ввести, не обязательно является хорошей идеей. Вы должны автоматически изменять дату только в том случае, если существующая дата раньше даты прибытия.