在同一日历中选择开始和结束日期[JQuery]

Question

我正在制作一个预订系统，并且想要一个大日历（表格），在右侧的一个小框中包含一些信息。

在我想要的文本框中输入：

• 入住日期
• 结帐日期

当用户在大日历中推送一个日期时，我怎样才能做到这一点，最好是使用 JQuery , 为下一次选择禁用任何以前的日期。下次用户推送日期时，“结帐日期”会获取该值。

Answer 1

查看 jQuery UI 的 DatePicker

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>