3

我想知道如何在 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必须大于date_to1第 1 周时。

我需要它像这样工作：

  • 第 1 周
    • 日期从 1 = 2012-11-02
    • Date To 1 = 2012-11-07 // 这将无法选择小于 2012-11-02 的日期
  • 第 2 周
    • Date From 2 = 2012-11-08 // 这将无法选择小于 2012-11-07 的日期，这是第 1 周的 Date To 1 的值。
    • Date To 2 = 2012-11-13 // 这将无法选择小于 2012-11-08 的日期
  • 第 3 周
    • Date From 3 = 2012-11-14 // 这将无法选择小于 2012-11-13 的日期，这是第 2 周的 Date To 2 的值。
    • Date To 3 = 2012-11-19 // 这将无法选择小于 2012-11-14 的日期
  • 第 4 周
    • Date From 4 = 2012-11-24 // 这将无法选择小于 2012-11-19 的日期，这是第 3 周的 Date To 3 的值。
    • Date To 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=""/>

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

4

0 回答 0