Question

我想知道如何在JQuery中创建多日期范围选择器。我有4个星期，我即将选择每周5天。

第1周有date_from1和date_to1。
第2周有date_from2和date_to2。
第3周有date_from3和date_to3。
第4周有date_from4和date_to4。

我已经有日期范围选择器仅工作2个日期。因此，当我选择date_from1的日期时（例如2012-11-25），那么date_to1将无法选择早于2012-11-25的日期，所以这样可以正常工作。

我想要做的就是当我选择第2周的日期时date_from2必须大于第1周的date_to1。

我需要它像这样工作：

第1周
- 日期自1 = 2012-11-02
- 日期至1 = 2012-11-07 //这将无法选择低于2012-11-02的日期
第2周
- 日期自2 = 2012-11-08 //这将无法选择小于2012-11-07的日期，这是第1周的日期为1的值。
- 日期至2 = 2012-11-13 //这将无法选择低于2012-11-08的日期
第3周
- 日期自3 = 2012-11-14 //这将无法选择低于2012-11-13的日期，这是第2周日期至2的值。
- 日期至3 = 2012-11-19 //这将无法选择低于2012-11-14的日期
第4周
- 日期自4 = 2012-11-24 //这将无法选择低于2012-11-19的日期，这是第3周日期至3的值。
- 日期至4 = 2012-11-29 //这将无法选择低于2012-11-24的日期

以下JavaScript位于$(document).ready内。这只适用于两个日期。

JS：

            var dates = $( "#date_from1, #date_to1" ).datepicker({ changeMonth: true, changeYear: true, dateFormat: "yy-mm-dd", outputDateFormat : 'yy MM dd', changeMonth: true, numberOfMonths: 1,
                beforeShowDay: $.datepicker.noWeekends,
                onSelect: function( selectedDate ) {
                    var option = this.id == "date_from1" ? "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 );
                }
            });

HTML：

Week 1
Date From1: <input type="text" name="date_from1" id="date_from1" value=""/>
Date To1: <input type="text" name="date_to1" id="date_to1" value=""/>

Week 2
Date From2: <input type="text" name="date_from2" id="date_from2" value=""/>
Date To2: <input type="text" name="date_to2" id="date_to2" value=""/>

Week 3
Date From3: <input type="text" name="date_from3" id="date_from3" value=""/>
Date To3: <input type="text" name="date_to3" id="date_to3" value=""/>

Week 4
Date From4: <input type="text" name="date_from4" id="date_from4" value=""/>
Date To4: <input type="text" name="date_to4" id="date_to4" value=""/>

希望你能帮助我们。提前谢谢。

多日期范围选择器

0 个答案: