Выберите дату начала и окончания в том же календаре [JQuery]

Question

Я делаю систему бронирования и хочу иметь один большой календарь (таблицу) с небольшой информацией в маленьком окошке справа.

В поле я хочу текстовые поля:

• Дата заезда
• Дата оформления заказа

Как я могу, желательно с JQuery, сделать это так, когда пользователь помещает одну дату в большой календарь, значение этой даты переносится в «поле даты возврата» в боковом ящике litte, и в то же время , отключает любые предыдущие даты для следующего выбора. В следующий раз, когда пользователь нажимает на дату, «Дата проверки» получает это значение.

Answer 1

Проверьте DatePicker пользовательского интерфейса jQuery

http://jqueryui.com/demos/datepicker/#date-range

<script>
$(function() {
    var dates = $( "#from, #to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onSelect: function( selectedDate ) {
            var option = this.id == "from" ? "minDate" : "maxDate",
                instance = $( this ).data( "datepicker" );
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );
            dates.not( this ).datepicker( "option", option, date );
        }
    });
});
</script>

<div class="demo">
    <label for="from">From</label>
    <input type="text" id="from" name="from"/>
    <label for="to">to</label>
    <input type="text" id="to" name="to"/>    
</div>