Я использую этот плагин
У меня есть следующие HTML и JavaScript:
<div>
<div>
<div>Departure:</div>
<div><input name="departureDateInput" value="#{bean.getFormattedFromDate()}" class="datepicker datepicker1"></input></div>
</div>
<div>
<div>Return:</div>
<div><input name="returnDateInput" value="#{bean.getFormattedToDate()}" class="datepicker datepicker2"></input></div>
</div>
</div>
<script>
var $input2 = $(".datepicker1").pickadate({
format: 'dd-mm-yyyy',
min: 1,
today: '',
onClose: function() {
var picker = $input.pickadate("picker");
picker.set("select", this.component.item.select.pick);
picker.open();
}
});
var $input = $('.datepicker2').pickadate({
format: 'dd-mm-yyyy',
min: 1,
today: '',
onClose: function() {
$("#departureDateInput").text($input2.val());
$("#returnDateInput").text($input.val());
}
});
</script>
Полученный результат из вышеперечисленного представляет собой 2 поля ввода, каждый из которых имеет свой собственный datepicker. После выбора даты для первого ввода автоматически отображается вторая, и пользователь может выбрать дату.
Функциональность прекрасна, но я хочу показать пользователю только один вход, который будет заполнен данными от и до дат, например 13-06-2013 - 15-06-2013
Я понятия не имею, как это реализовать. У кого-нибудь есть предложения?
Почему бы не оставить их в качестве двух отдельных сборщиков дат, но нарисуйте их так, как будто они были такими... Я наложил их бок о бок и установил стиль на них, чтобы левая сторона не имела правильной границы, а справа нет левой границы.
Таким образом, вы получите оба значения, переданные как отдельные значения после отправки формы.
Вот рабочий пример, но с использованием jQuery UI: http://jsfiddle.net/kcCUD/10/
$(function() {
var date1 = $('#date1');
var date2 = $('#date2');
date1.datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
var date = $(this).datepicker("getDate");
date2.datepicker("setDate", date);
date2.datepicker( "show" );
}
});
date2.datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
var date = $(this).datepicker("getDate");
var formattedDate = $.datepicker.formatDate('mm/dd/yy', date);
date1.val(date1.val() + " - " + formattedDate);
}
});
});
HTML:
<input id="date1" value="" size="30" />
<input id="date2" style="visibility:hidden" value="" />
Почему бы вам не попробовать это:
http://www.benknowscode.com/2012/11/selecting-ranges-jquery-ui-datepicker.html
Демо здесь.
http://bseth99.github.io/projects/jquery-ui/4-jquery-ui-datepicker-range.html