jquery - Jquery Datepickerは、対応する日付の前後から3つの日付のみを設定します

Question

2 つの jquery 日付ピッカーを使用しました。
最初の日付ピッカーで「2012 年 3 月 18 日」のような日付を選択し、次の日付ピッカーは 2012 年 3 月 15 日から 2012 年 3 月 21 日までの日付のみを表示する必要があります。
特定の日付 ("18-MAR-2012") の前後から 3 日だけ追加する必要があります。これを行うにはどうすればよいですか?

Answer 1

これは範囲日付ピッカーに関連しています。私は解決策を見つけました。これがあなたを助けるかもしれません。作業フィドルはこちらです（フィドルにスタイリングがありません）。ここでは、最初の日付ピッカーの「onSelect」関数で次の日付ピッカーの制限を設定しています。

var d;var tempdate; var tempdate1; var da; var da1;
$('#nam1').datepicker({
    minDate: 0,
    dateFormat: 'd/m/yy',
    buttonImageOnly: true,
    showAnim: 'slideDown',
    duration: 0,
    onSelect: function(dateStr) {
        d = $.datepicker.parseDate('d/m/yy', dateStr); //Get selected date
        tempdate = new Date(d);
        tempdate1 = new Date(d);
        tempdate.setDate(tempdate.getDate() - 3);    //Subtracted 3 days
        tempdate1.setDate(tempdate1.getDate() + 3);  // added 3 days 
        da = new Date(tempdate);
        da1 = new Date(tempdate1);
    }
});

$('#nam2').datepicker({
    dateFormat: 'd/m/yy',
    buttonImageOnly: true,
    showAnim: 'slideDown',
    duration: 0,
    beforeShow: function(input)
        {
            //setting min and max date for second datepicker
            if(da1 != undefined) return { minDate: da, maxDate: da1 }; 
        }
});​

日付変数を処理するさらに良い方法があるでしょう。自分で試してみてください。

Answer 2

$(function(){
    $('#datepicker').datepicker({
        onSelect: function(dateText, inst) {
            var threeDays = 259200000;
            $('#datepicker2').datepicker("option", "minDate", new Date(Date.parse(dateText)-threeDays));
            $('#datepicker2').datepicker("option", "maxDate", new Date(Date.parse(dateText)+threeDays));
            $('#datepicker2').datepicker("setDate", dateText);
        }
    });
    $('#datepicker2').datepicker();
});

...259200000 はマイクロ秒で表すと 3 日です。最初の日付ピッカーで日付を選択するたびに、日付ピッカーの範囲が制限されます。残念ながら、私が省略した場合$('#datepicker2').datepicker("setDate", dateText);、2 番目の日付ピッカーの日付は可能な最後の値に設定されます。