Как исправить работу datepicker?

Question

[rinatoptimus]

http://test.jethunter.нэт - если начать заполнять форму, появится датапикер, в котором если нажать на стрелки (предыд. месяц/след. месяц), датапикер исчезает.
Смотрел здесь:
stackoverflow.com/questions/22768094/bootstrap-3-p... и здесь
stackoverflow.com/questions/18607414/jquery-datepi...,
но не могу разобраться, в чем дело.
Как исправить?

Answer 1

[Илья Шатохин]

После потери фокуса инпутом вот этот код по таймауту скрывает ваш datepicker:

$('#dateDepartureInput, #dateArrivalInput').on('focus', function () {
	$(this).siblings('.js-datepicker-wrap').removeClass('hidden');
}).on('focusout', function () {
	var $this = $(this);
	setTimeout(function () {
		$this.siblings('.js-datepicker-wrap').addClass('hidden');
	}, 500);
});

P.S. класс hidden очень плохая практика, у ui.datepicker есть свой метод ".datepicker('hide')".

Все это надо заменить на:

$('#dateDepartureInput, #dateArrivalInput').datepicker({
  showOn: "focus"
});

Comments

[rinatoptimus]

Да, это понятно. Пробовал сделать так, чтобы скрытие происходило не при потере фокуса, а, например, при клике по одной из ссылок в календаре, т.е. по какой-нибудь дате:
$('#dateDepartureInput, #dateArrivalInput').on('focus', function () {
$(this).siblings('.js-datepicker-wrap').removeClass('hidden');
});
$('a.ui-state-default').click(function () { // при клике на дату скрыть датапикер
$('.js-datepicker-wrap').addClass('hidden');
});
- не сработало.

[rinatoptimus]

Сработало так:
$(document).ready(function () {
$('#dateDepartureInput, #dateArrivalInput').datepicker({ dateFormat: 'dd/mm/yy' });
$('#dateDepartureInput, #dateArrivalInput').focus(function () {
$(this).datepicker("show");
setTimeout(function () {
$('.js-datepicker-wrap').datepicker("hide");
$('.js-datepicker-wrap').blur();
}, 2000)
})
});
Вот только выбрав дату и открыв датапикер снова, не показывает выбранную дату в календаре.

[Илья Шатохин]

rinatoptimus: а зачем вам все эти костыли? Datepicker сам скрывает и отображает по клику на инпуте. Смотрите мой ответ, я его дополнил примером реализации для вашего случая.

[rinatoptimus]

Илья Шатохин: Спасибо, это до меня реализовали. Выяснилось теперь, что код, который сработал, на самом деле, не отправляет данные из датапикера) Ужас!

[Илья Шатохин]

rinatoptimus: если помогло, отметьте вопрос как решение. Спасибо)

[rinatoptimus]

Илья Шатохин: Done! Спасибо!