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 週の日付を第 1 週date_from2より大きくする必要があるときだけdate_to1です。

次のように動作する必要があります。

  • 1週目
    • 開始日 1 = 2012-11-02
    • Date To 1 = 2012-11-07 // 2012-11-02 より前の日付は選択できません
  • 2週目
    • Date From 2 = 2012-11-08 // これは、第 1 週の Date To 1 の値である 2012-11-07 より前の日付を選択できません。
    • Date To 2 = 2012-11-13 // 2012-11-08 より前の日付は選択できません
  • 3週目
    • Date From 3 = 2012-11-14 // これは、第 2 週の Date To 2 の値である 2012-11-13 より前の日付を選択できません。
    • Date To 3 = 2012-11-19 // 2012-11-14 より前の日付は選択できません
  • 4週目
    • Date From 4 = 2012-11-24 // これは、第 3 週の Date To 3 の値である 2012-11-19 より前の日付を選択できません。
    • Date To 4 = 2012-11-29 // 2012-11-24 より前の日付は選択できません

次の JavaScript は の中にあり$(document).readyます。これは、2 つの日付でのみ機能します。

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