角度daterangepicker - 「FROM」の日付のほうが

Question

「from」と「to」の日付を設定する必要があります。私は過去からではなく、将来的にトモロウや日付からセットされた "from"から欲しい。開始日を選択した後、ピッカーに "有効"を有効にして終了日を設定しますが、最小日の範囲で設定します。そしてdomの日の範囲を表示します。 私は公式ページからgithubソリューションを試していますが、すべてが角度データ範囲ではなくブートストラップdaterangeからです。 thnx ここでは、日付を使用している場合は、HTMLコード

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
         <p class="input-group"> 
          <input type="text" 
            class="form-control" 
            datetime-picker="yyyy-MM-dd" 
            ng-model="ctrl.picker4.date" 
            is-open="ctrl.picker4.open" 
            enable-time="false" 
            datepicker-options="ctrl.picker4.datepickerOptions" 
            myformat 
            /> 
          <span class="input-group-btn"> 
           <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker4')"><i class="glyphicon glyphicon-calendar"></i></button> 
          </span> 
         </p> 
        </div> 
       </div> 
       <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12 form-group"> 
        <label class="col-lg-2 col-xs-2 control-label" style="color: #fff">To</label> 
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
         <p class="input-group"> 
          <input type="text" 
            class="form-control" 
            datetime-picker="yyyy-MM-dd" 
            ng-model="ctrl.picker5.date" 
            is-open="ctrl.picker5.open" 
            enable-time="false" 
            datepicker-options="ctrl.picker5.datepickerOptions" 
            myformat 
            /> 
          <span class="input-group-btn"> 
           <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker5')"><i class="glyphicon glyphicon-calendar"></i></button> 
          </span> 
         </p> 
        </div> 
       </div> 

、ここではdaterangepicker（http://www.daterangepicker.com/）を使用した方が良い範囲コントローラ

//date picker 
    var that = this; 

// date picker 


// min date picker 
    this.picker4 = { 
     date: new Date(), 
     datepickerOptions: { 
      showWeeks: true, 
      startingDay: 1, 
      maxDate: null 
     } 
    }; 

// max date picker 
    this.picker5 = { 
     date: new Date(), 
     datepickerOptions: { 
      showWeeks: true, 
      startingDay: 1, 
      minDate: null 
     } 
    }; 
    /* 
    // set date for max picker, 10 days in future 
    this.picker5.date.setDate(this.picker5.date.getDate() + 10); 

    */ 

// when closed picker 
    this.picker13 = { 
     date: new Date(), 
     closed: function (args) { 
      that.closedArgs = args; 
     } 
    }; 



    this.openCalendar = function (e, picker) { 
     that[picker].open = true; 
    }; 
// watch min and max dates to calculate difference 
    var unwatchMinMaxValues = $scope.$watch(function() { 
     return [that.picker4, that.picker5, that.picker10, that.picker11]; 
    }, function() { 
// min max dates 
     that.picker4.datepickerOptions.maxDate = that.picker5.date; 
     that.picker5.datepickerOptions.minDate = that.picker4.date; 
     if (that.picker4.date && that.picker5.date) { 
      var diff = that.picker4.date - that.picker5.date; 
      that.dayRange = Math.round(Math.abs(diff/(1000 * 60 * 60 *   24))) 
     } else { 
      that.dayRange = 'n/a'; 
     } 


    }, true); 


// destroy watcher 
    $scope.$on('$destroy', function() { 
     unwatchMinMaxValues(); 
    }); 

Answer 1

です。これにより、開始日と終了日の検証コードを書く手間を省くことができます。開始日を選択すると、開始日以降の終了日を選択できるようになります。検証コードを書く必要はありません。 iは開始日の日付ピッカーのためのディレクティブを使用している

Answer 2

最小minDate:new Date().getDate+0,と最大maxDate:new Date().getDate+30bootstrap-datetimepicker

module.directive('examdatepicker1', function() { 
    return function(scope, element, attrs) { 
     var currentYear=new Date().getFullYear(); 
     var finalYear=parseInt(new Date().getFullYear())+1; 
     $(element).datepicker({ 
      dateFormat: 'yy/mm/dd', 
      changeYear: true, 
      changeMonth: true, 
      yearRange: currentYear+":"+finalYear, 
      minDate:new Date().getDate+0, 
      //maxDate:new Date().getDate+30, 
      onClose: function(date){ 
       //var datearray = date.split("/"); 
       //var newdate = datearray[1] + '/' + datearray[0] + '/' + datearray[2]; 
       var selectedDate = new Date(date); 
       var msecsInADay = 86400000; 
       var minimum = new Date(selectedDate.getTime()); 
       //var maximum = new Date(selectedDate.getTime() + (30*msecsInADay)); 
       $("#end_exam_date").datepicker("option", "minDate", minimum); 
      } 
     }); 
     return false; 
    } 
}); 

を用いIHAVEと第二日付ピッカーため

HTMLで

module.directive('examdatepicker2', function() { 
    return function(scope, element, attrs) { 
     var currentYear=new Date().getFullYear(); 
     var finalYear=parseInt(new Date().getFullYear())+1; 
     $(element).datepicker({ 
      dateFormat: 'yy/mm/dd', 
      changeYear: true, 
      changeMonth: true, 
      yearRange: currentYear+":"+finalYear 
     }); 
     return false; 
    } 
}); 

<input class="form-control bg-color-white" id="end_exam_date" name='end_exam_date' ng-model="end_exam_date" class="form-control" examdatepicker1 readonly required> 

Answer 3

ここでは単にsolutiですに。これをコントローラから削除する必要があります

that.picker4.datepickerOptions.maxDate = that.picker5.date; 

すべてが機能します。これは解決策であるため、終了日を有効にする必要はありません。しかし、私の最初の質問のコードから、私はdaterangeを表示する必要があります。私はコードを作るが、私は、日付の形式を変更するので、dayRangeは計算できないと思う。

if (that.picker4.date && that.picker5.date) { 
     var diff = that.picker4.date - that.picker5.date; 
     that.dayRange = Math.round(Math.abs(diff/(1000 * 60 * 60 *   24))) 
    } else { 
     that.dayRange = 'n/a'; 
    } 

コードをご覧ください。 Thnx