2 указателя даты в одном поле ввода

0

Я использую этот плагин

У меня есть следующие 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

Я понятия не имею, как это реализовать. У кого-нибудь есть предложения?

Теги:

3 ответа

1

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

Таким образом, вы получите оба значения, переданные как отдельные значения после отправки формы.

  • 0
    Я думал о том, чтобы сделать это, но когда пользователь выбирает входные данные, ему нужно предложить выбрать новый диапазон дат. Сделав это таким образом, пользователь получит доступ к дате «до» :(
1

Вот рабочий пример, но с использованием 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="" />
  • 0
    Спасибо Джасперу, я хочу использовать пользовательский инструмент выбора даты, но я посмотрю, смогу ли я использовать то, что вы мне дали, чтобы получить желаемый эффект. Если это сработает, я отмечу это как принятый ответ и отредактирую свой вопрос, чтобы показать, что я сделал.
0

Ещё вопросы

Сообщество Overcoder
Наверх
Меню