日付を開くには、日付ピッカーの範囲でそれぞれを使用してFROM日付を選択した後

Question

2つの入力、＃日付と＃日付からなるページにカレンダーの範囲があります。日付から選択すると、日付を自動的に表示します。

HTMLマークアップ：

<div class="calendar-range"> 
    <div class="filter-first date-from"> 
     <input type="text" id="from-date" class="form-control form-control-main calendar-from datepicker"> 
     <i class="fa fa-calendar"></i> 
    </div> 
    <div class="filter date-to"> 
     <input type="text" id="to-date" class="form-control form-control-main calendar-to datepicker"> 
     <i class="fa fa-calendar"></i> 
    </div> 
</div> 

これは、jQueryのコードです：

body.find(".calendar-range").each(function (index, callback) { 
    var selectedToElement = $(this).find('.calendar-to'); 
    var selectedToDay = selectedToElement.datepicker('getDate'); 
    var selectedFromElement = $(this).find('.calendar-from'); 
    var selectedFromDay = selectedFromElement.datepicker('getDate'); 
    var numberOfMonths = 2; 

    if (body.width() < 768) { 
     numberOfMonths = 1; 
    } 

    var settings = { 
     changeMonth: false, 
     numberOfMonths: numberOfMonths, 
     dateFormat: dateFormat, 
     minDate: new Date(Date.now()), 
     maxDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)), 
     onSelect: function (dateText, object) { 
      selectedToDay = selectedToElement.datepicker('getDate'); 
      selectedFromDay = selectedFromElement.datepicker('getDate'); 

      selectedToElement.change(); 
      selectedFromElement.change(); 

      if ($(this).hasClass('calendar-from')) { 
       to.datepicker("option", "minDate", getDate(this.value)); 
      } else if ($(this).hasClass('calendar-to')) { 
       from.datepicker("option", "maxDate", getDate(this.value)); 
      } 
     }, 
     beforeShow: function (input, inst) { 
      selectedToDay = selectedToElement.datepicker('getDate'); 
      selectedFromDay = selectedFromElement.datepicker('getDate'); 
     }, 
     beforeShowDay: function (date) { 
      var d = date.getTime(); 
      var cssClass = 'selected-date-range'; 
      var defaultClass = ''; 

      if (selectedToDay != null && d == selectedToDay.getTime()) { 
       cssClass = cssClass + ' selected-date-range-last'; 
       defaultClass = defaultClass + ' selected-date-range-last'; 
      } else if (selectedFromDay != null && d == selectedFromDay.getTime()) { 
       cssClass = cssClass + ' selected-date-range-first'; 
       defaultClass = defaultClass + ' selected-date-range-first'; 
      } 

      if (selectedFromDay != null && selectedToDay != null && d <= selectedToDay.getTime() && d >= selectedFromDay.getTime()) { 
       return [true, cssClass, '']; 
      } 
      return [true, defaultClass, '']; 
     }, 
     onClose: function (input, object) { 
      if (object.id === "from-date") { 
       to.datepicker("show"); 
      } 
     } 
    }; 

    var from = selectedFromElement.datepicker(settings); 
    var to = selectedToElement.datepicker(settings); 
}); 

私はOnCloseのでそれを解決しようとしたが、これは二度繰り返すようだ、とあまりにも最新開く＃を閉じます。 2つの日付ピッカーを分離せずに実装することは可能ですか？ （また、何か本当に奇妙な日付ピッカーを表示/非表示で発生）

、THX。

Answer 1

いくつかの改善点があります。それが初期化されています前に、私たちはgetDateに.datepicker()を呼び出すべきではありません、

$(function() { 
    var body = $("body"); 
    var dateFormat = "mm/dd/yy"; 
    $(".calendar-range").each(function(index, callback) { 
    var selectedToElement = $(this).find('.calendar-to'); 
    var selectedToDay = selectedToElement.val().length ? selectedToElement.datepicker('getDate') : new Date; 
    var selectedFromElement = $(this).find('.calendar-from'); 
    var selectedFromDay = selectedFromElement.val().length ? selectedFromElement.datepicker('getDate') : new Date; 
    var numberOfMonths = 2; 

    if (body.width() < 768) { 
     numberOfMonths = 1; 
    } 

    var settings = { 
     changeMonth: false, 
     numberOfMonths: numberOfMonths, 
     dateFormat: dateFormat, 
     minDate: 0, 
     maxDate: "+1y", 
     onSelect: function(dateText, object) { 
     selectedToDay = selectedToElement.datepicker('getDate'); 
     selectedFromDay = selectedFromElement.datepicker('getDate'); 
     /* 
     selectedToElement.change(); 
     selectedFromElement.change(); 
     */ 
     if ($(this).hasClass('calendar-from')) { 
      selectedToElement.datepicker("option", "minDate", dateText); 
     } else if ($(this).hasClass('calendar-to')) { 
      selectedFromElement.datepicker("option", "maxDate", dateText); 
     } 
     }, 
     beforeShow: function(input, inst) { 
     selectedToDay = selectedToElement.datepicker('getDate'); 
     selectedFromDay = selectedFromElement.datepicker('getDate'); 
     }, 
     beforeShowDay: function(date) { 
     var d = date.getTime(); 
     var cssClass = 'selected-date-range'; 
     var defaultClass = ''; 
     if (selectedToDay != null && d == selectedToDay.getTime()) { 
      cssClass = cssClass + ' selected-date-range-last'; 
      defaultClass = defaultClass + ' selected-date-range-last'; 
     } else if (selectedFromDay != null && d == selectedFromDay.getTime()) { 
      cssClass = cssClass + ' selected-date-range-first'; 
      defaultClass = defaultClass + ' selected-date-range-first'; 
     } 

     if (selectedFromDay != null && selectedToDay != null && d <= selectedToDay.getTime() && d >= selectedFromDay.getTime()) { 
      return [true, cssClass, '']; 
     } 
     return [true, defaultClass, '']; 
     }, 
     /* 
     onClose: function(input, object) { 
     if (object.id === "from-date") { 
      to.datepicker("show"); 
     } 
     } 
     */ 
    }; 

    var from = selectedFromElement.datepicker(settings); 
    var to = selectedToElement.datepicker(settings); 
    }); 
}); 

まず

https://jsfiddle.net/Twisty/mcqra47o/

はJavaScript：ここでは実施例です。だから、早く次の変数を設定するために、我々はこれを行うことができます：

var selectedToDay = selectedToElement.val().length ? selectedToElement.datepicker('getDate') : new Date; 
var selectedFromDay = selectedFromElement.val().length ? selectedFromElement.datepicker('getDate') : new Date; 

minDateとmaxDateのために、私たちはAPIを確認することができますし、次を参照してください。

複数のタイプがサポートさ：

• 日付：最小の日付を含む日付オブジェクト。

• 番号：今日からの日数。たとえば、2は今日から2日を表し、-1は昨日を表します。

• 文字列：dateFormatオプションで定義された形式の文字列、または相対日付。相対日付には値と期間のペアが含まれている必要があります。有効期間は、年は"y"、月は"m"、週は"w"、日数は"d"です。たとえば、"+1m +7d"は、今日から1ヶ月および7日を表します。

私は、可能な場合は、相対日付形式を使用してお勧めします。今日は0を使い、1年間は"+1y"を使いました。

選択した場合、とにかくchangeが解雇されたので、私はこれをコメントアウトしました。それが何かのために必要であれば、私は.tragger("change")を見ることを提案するでしょう。

onSelectのオプションはdateTextになりますので、必要に応じて新しいminDateとmaxDateを設定することができます。

あなたが望むすべてのものを扱いたいと思います。