jquery - jQuery datepicker - 2 つの入力/テキストボックスと制限範囲

Question

jQuery Datepicker ウィジェットを 2 つの入力ボックスで使用しています。1 つは"From"日付用で、2 つ目は"To"日付用です。2 つの入力ボックスを相互に連携させるための基礎として、 jQuery Datepicker 機能デモを使用していますが、次の追加の制限を追加できるようにする必要があります。

2008 年 12 月 1 日より前の日付は指定できません
「終了」日付は今日より遅くすることはできません
「開始日」を選択すると、「終了日」は「開始日」から7 日間の範囲内でのみ指定できます。
「終了日」が最初に選択された場合、「開始日」は「終了日」の7 日前の範囲内でのみ指定できます (最初に選択できる日付は 12 月 1 日までです)。

上記のすべてを一緒に機能させることはできないようです。

要約すると、12 月 1 日から今日までの最大 7 日間の範囲を選択できるようにしたいと考えています (これを 12 月 1 日に投稿していることに気付いたので、現時点では今日しか取得できません)。

これまでの私のコード

$(function () {

$('#txtStartDate, #txtEndDate').datepicker(
            {
            showOn: "both",
            beforeShow: customRange,
            dateFormat: "dd M yy",
            firstDay: 1, 
            changeFirstDay: false
            });
});

function customRange(input) 
{ 

return {
         minDate: (input.id == "txtStartDate" ? new Date(2008, 12 - 1, 1) : null),
         minDate: (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate") : null), 
         maxDate: (input.id == "txtStartDate" ? $("#txtEndDate").datepicker("getDate") : null)
       }; 
}

7 日間の範囲制限がなく、2008 年 12 月 1 日より前または今日以降の「終了日」の日付を選択できません。どんな助けでも大歓迎です、ありがとう。

score 49 · Accepted Answer

ベンの助けに感謝します。私はあなたの投稿に基づいて構築し、これを思いつきました。これで完成し、見事に機能します！

これが実用的なデモです。コードを表示するには、URL に/editを追加します

以下の完全なコード-

$(function () 
{   
    $('#txtStartDate, #txtEndDate').datepicker({
        showOn: "both",
        beforeShow: customRange,
        dateFormat: "dd M yy",
        firstDay: 1, 
        changeFirstDay: false
    });

});

function customRange(input) { 
    var min = new Date(2008, 11 - 1, 1), //Set this to your absolute minimum date
        dateMin = min,
        dateMax = null,
        dayRange = 6; // Set this to the range of days you want to restrict to

    if (input.id === "txtStartDate") {
        if ($("#txtEndDate").datepicker("getDate") != null) {
            dateMax = $("#txtEndDate").datepicker("getDate");
            dateMin = $("#txtEndDate").datepicker("getDate");
            dateMin.setDate(dateMin.getDate() - dayRange);
            if (dateMin < min) {
                dateMin = min;
            }
        }
        else {
            dateMax = new Date; //Set this to your absolute maximum date
        }                      
    }
    else if (input.id === "txtEndDate") {
        dateMax = new Date; //Set this to your absolute maximum date
        if ($("#txtStartDate").datepicker("getDate") != null) {
            dateMin = $("#txtStartDate").datepicker("getDate");
            var rangeMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + dayRange);

            if(rangeMax < dateMax) {
                dateMax = rangeMax; 
            }
        }
    }
    return {
        minDate: dateMin, 
        maxDate: dateMax
    };     
}

score 15 · Accepted Answer

パーティーに少し遅れたことに気付きましたが、動作するサンプルコードをどのように変更したかを以下に示します。特定の最大日付と最小日付を設定する必要はありませんでした。日付範囲が重複したくなかったので、互いに設定できるようにしました。

jQuery(function() {
  jQuery('#calendardatetime_required_to, #calendardatetime_required_from').datepicker('option', {
    beforeShow: customRange
  });
});

function customRange(input) {
  if (input.id == 'calendardatetime_required_to') {
    return {
      minDate: jQuery('#calendardatetime_required_from').datepicker("getDate")
    };
  } else if (input.id == 'calendardatetime_required_from') {
    return {
      maxDate: jQuery('#calendardatetime_required_to').datepicker("getDate")
    };
  }
}

(私の日付ピッカーは、さらに上のスクリプトで既に初期化されていますが、それは単なるデフォルト設定です。)

私が必要とすることをしているようです:)

私の例については、こちらを参照してください。

score 14 · Accepted Answer

よし、これはどうだ:

function customRange(input) 
{ 
    var min = new Date(2008, 12 - 1, 1);
    var dateMin = min;
    var dateMax = null;

    if (input.id == "txtStartDate" && $("#txtEndDate").datepicker("getDate") != null)
    {
        dateMax = $("#txtEndDate").datepicker("getDate");
        dateMin = $("#txtEndDate").datepicker("getDate");
        dateMin.setDate(dateMin.getDate() - 7);
        if (dateMin < min)
        {
            dateMin = min;
        }           
    }
    else if (input.id == "txtEndDate")
    {
        dateMax = new Date();
        if ($("#txtStartDate").datepicker("getDate") != null)
        {
            dateMin = $("#txtStartDate").datepicker("getDate");
            dateMax = $("#txtStartDate").datepicker("getDate");
            dateMax.setDate(dateMax.getDate() + 7); 
        }
    }
    return {
     minDate: dateMin, 
     maxDate: dateMax
   }; 

}

これは、あなたの要件をすべて満たした、私が思いつくことができる最高のものです（私は思う...）

score 4 · Accepted Answer

2 回目に input.id をチェックするときに 2 回目の minDate が null に設定されているため、txtStartDate の開始日が機能していません。また、maxDate は、txtStartDate ではなく、txtEndDate をチェックする必要があります。これを試して：

    function customRange(input) 
{ 
    var mDate = (input.id == "txtStartDate" ? new Date(2008, 12 - 1, 1) : $("#txtStartDate").datepicker("getDate"));
    return {
         minDate: mDate, 
         maxDate: (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate").getDate() + 5 : null)
       }; 
}

なぜ「+ 7」ではなく「+ 5」なのかはわかりませんが、0 を足すと、選択した日付とその次の日付の選択可能な日付範囲が得られます。

score 4 · Accepted Answer

これは、私がよくある問題だと思うものの解決策をたくさん掘り下げた後に思いついた解決策です。これにより、互換性のある日の共有入力範囲の周りで入力が効果的に「バウンス」されます。意味 - 2 つのフィールドがある場合、一方を使用して他方を制約することができ、もう一方は必要に応じて元のフィールドを再定義できます。これの目的は、2 つのフィールド間の日数 (または月数など) が有限の範囲になるようにすることです。この特定の例では、いずれかのフィールドで何かを選択できる未来の時間も制限しています (例: 3 か月)。


$("#startdate").datepicker({
   minDate: '+5', 
   maxDate: '+3M',
   changeMonth: true,
   showAnim: 'blind',
   onSelect: function(dateText, inst){ 

    // Capture the Date from User Selection
    var oldDate = new Date(dateText);
    var newDate = new Date(dateText);

    // Compute the Future Limiting Date
    newDate.setDate(newDate.getDate()+5);


    // Set the Widget Properties
    $("#enddate").datepicker('option', 'minDate', oldDate);
    $("#enddate").datepicker('option', 'maxDate', newDate);

    }
  });

 $("#enddate").datepicker({
  minDate: '+5',
  maxDate: '+3M',
  changeMonth: true,
  showAnim: 'blind', 
  onSelect: function(dateText, inst){ 

    // Capture the Date from User Selection
    var endDate = new Date(dateText);
    var startDate = new Date(dateText);

    // Compute the Future Limiting Date
    startDate.setDate(startDate.getDate()-5);

    // Set the Widget Properties
    $("#startdate").datepicker('option', 'minDate', startDate);
    $("#startdate").datepicker('option', 'maxDate', endDate);

    }

  });

score 4 · Accepted Answer

rangeSelect を使用して、コントロールを 2 つではなく 1 つにすることを検討してください。

あなたが求めているものを達成するには、 onSelect リスナーを追加してから呼び出しdatepicker( "option", settings )て設定を変更する必要があると思います。

score 3 · Accepted Answer

これが私がそれを使用する方法です：

function customRange(input)
{
    var min = new Date();
    return {
        minDate: ((input.id == "txtStartDate") ? min : (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate") : null)),
        maxDate: (input.id == "txtStartDate" ? $("#txtEndDate").datepicker("getDate") : null)
    };
}

score 0 · Accepted Answer

これが私がやった方法です。Jquery UI Webサイトからソースを取得し、制約を追加するために変更しました。

$(document).ready(function ()
{      
  var dates = $('#StartDate, #EndDate').datepicker({
        minDate: new Date(2008, 11, 1), 
        maxDate: "+0D",
        dateFormat: "dd M yy",
        changeMonth: true,
        changeYear: true,
        onSelect: function (selectedDate)
        {
            var option = this.id == "StartDate" ? "minDate" : "maxDate",
                instance = $(this).data("datepicker"),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings);
            var edate;
            var otherOption;
            var d;
            if (option == "minDate")
            {
                otherOption = "maxDate";
                d = date.getDate() + 7;
            }
            else if (option == "maxDate")
            {
                otherOption = "minDate";
                d = date.getDate() - 7;
            }

            var m = date.getMonth();
            var y = date.getFullYear();
            edate = new Date(y, m, d);

            dates.not(this).datepicker("option", option, date);
            dates.not(this).datepicker("option", otherOption, edate);
        }
    });
});

最初のアイデア：http：//jqueryui.com/demos/datepicker/#date-range

注：日付をリセット/クリアするオプションも必要になります（つまり、ユーザーが「開始日」を選択した場合、「終了日」は制限されます。「開始日」を選択した後、ユーザーが「終了日」を選択した場合'、開始日も制限されます。ユーザーが別の「開始」日付を今すぐ選択できるようにするには、明確なオプションが必要です。）

jquery - jQuery datepicker - 2 つの入力/テキスト ボックスと制限範囲

8 に答える 8

Related

Reference

jquery - jQuery datepicker - 2 つの入力/テキストボックスと制限範囲