Added one "Max Range" as a optional property

projects/picker/src/lib/date-time/adapter/date-time-adapter.class.ts

@@ -3,6 +3,7 @@
  */
 import { Observable, Subject } from 'rxjs';
 import { inject, InjectionToken, LOCALE_ID } from '@angular/core';
+import { coerceNumberProperty } from '@angular/cdk/coercion';
 
 /** InjectionToken for date time picker that can be used to override default locale code. */
 export const OWL_DATE_TIME_LOCALE = new InjectionToken<string>(
@@ -300,4 +301,13 @@ export abstract class DateTimeAdapter<T> {
         }
         return date;
     }
+
+    isPositiveNumber(val: any): number | null {
+        if (coerceNumberProperty(val) > 0) {
+            return val;
+        } else {
+            return null;
+        }
+    }
+
 }

projects/picker/src/lib/date-time/calendar-month-view.component.ts

@@ -130,6 +130,12 @@ export class OwlMonthViewComponent<T>
             v = this.dateTimeAdapter.deserialize(v);
             return this.getValidDate(v);
         });
+
+        if (this.maxRange) {
+            this.generateCalendar();
+            this.cdRef.markForCheck();
+        }
+
         this.setSelectedDates();
     }
 
@@ -209,6 +215,17 @@ export class OwlMonthViewComponent<T>
         }
     }
 
+    /** The maximum selectable range. */
+    private _maxRange: number | null;
+    @Input()
+    get maxRange(): number | null {
+        return this._maxRange;
+    }
+
+    set maxRange(value: number | null) {
+        this._maxRange = this.selectMode === 'range' ? this.dateTimeAdapter.isPositiveNumber(value) : null;
+    }
+
     private _weekdays: Array<{ long: string; short: string; narrow: string }>;
     get weekdays() {
         return this._weekdays;
@@ -398,7 +415,7 @@ export class OwlMonthViewComponent<T>
                 moment = this.dateTimeAdapter.addCalendarDays(
                     this.pickerMoment,
                     this.dateTimeAdapter.getNumDaysInMonth(this.pickerMoment) -
-                        this.dateTimeAdapter.getDate(this.pickerMoment)
+                    this.dateTimeAdapter.getDate(this.pickerMoment)
                 );
                 this.pickerMomentChange.emit(moment);
                 break;
@@ -407,27 +424,27 @@ export class OwlMonthViewComponent<T>
             case PAGE_UP:
                 moment = event.altKey
                     ? this.dateTimeAdapter.addCalendarYears(
-                          this.pickerMoment,
-                          -1
-                      )
+                        this.pickerMoment,
+                        -1
+                    )
                     : this.dateTimeAdapter.addCalendarMonths(
-                          this.pickerMoment,
-                          -1
-                      );
+                        this.pickerMoment,
+                        -1
+                    );
                 this.pickerMomentChange.emit(moment);
                 break;
 
             // add 1 month (or 1 year)
             case PAGE_DOWN:
                 moment = event.altKey
                     ? this.dateTimeAdapter.addCalendarYears(
-                          this.pickerMoment,
-                          1
-                      )
+                        this.pickerMoment,
+                        1
+                    )
                     : this.dateTimeAdapter.addCalendarMonths(
-                          this.pickerMoment,
-                          1
-                      );
+                        this.pickerMoment,
+                        1
+                    );
                 this.pickerMomentChange.emit(moment);
                 break;
 
@@ -569,9 +586,18 @@ export class OwlMonthViewComponent<T>
                 this.dateTimeAdapter.compare(date, this.minDate) >= 0) &&
             (!this.maxDate ||
                 this.dateTimeAdapter.compare(date, this.maxDate) <= 0)
+            && ((!this._selecteds[0] || !this.maxRange) ? true : (!this._selecteds[1] ? ((this.dateTimeAdapter.compare(date, this._selecteds[0]) >= 0) ?
+                this.dateDifferenceInDays(date, this._selecteds[0]) <= this.maxRange : true) : true))
         );
     }
 
+    private dateDifferenceInDays(firstDate: any, secondDate: any) {
+        const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
+        const diffDays = Math.ceil(Math.abs((firstDate - secondDate) / oneDay));
+        return diffDays;
+    }
+
+
     /**
      * Get a valid date object
      */
@@ -592,9 +618,9 @@ export class OwlMonthViewComponent<T>
             this.dateTimeAdapter.isValid(dateLeft) &&
             this.dateTimeAdapter.isValid(dateRight) &&
             this.dateTimeAdapter.getYear(dateLeft) ===
-                this.dateTimeAdapter.getYear(dateRight) &&
+            this.dateTimeAdapter.getYear(dateRight) &&
             this.dateTimeAdapter.getMonth(dateLeft) ===
-                this.dateTimeAdapter.getMonth(dateRight)
+            this.dateTimeAdapter.getMonth(dateRight)
         );
     }
 

projects/picker/src/lib/date-time/calendar.component.html

@@ -71,6 +71,7 @@
             [selectMode]="selectMode"
             [minDate]="minDate"
             [maxDate]="maxDate"
+            [maxRange]="maxRange"
             [dateFilter]="dateFilter"
             [hideOtherMonths]="hideOtherMonths"
             (pickerMomentChange)="handlePickerMomentChange($event)"

projects/picker/src/lib/date-time/calendar.component.ts

@@ -66,10 +66,10 @@ export class OwlCalendarComponent<T>
 
         this._minDate = value
             ? this.dateTimeAdapter.createDate(
-                  this.dateTimeAdapter.getYear(value),
-                  this.dateTimeAdapter.getMonth(value),
-                  this.dateTimeAdapter.getDate(value)
-              )
+                this.dateTimeAdapter.getYear(value),
+                this.dateTimeAdapter.getMonth(value),
+                this.dateTimeAdapter.getDate(value)
+            )
             : null;
     }
 
@@ -86,13 +86,24 @@ export class OwlCalendarComponent<T>
 
         this._maxDate = value
             ? this.dateTimeAdapter.createDate(
-                  this.dateTimeAdapter.getYear(value),
-                  this.dateTimeAdapter.getMonth(value),
-                  this.dateTimeAdapter.getDate(value)
-              )
+                this.dateTimeAdapter.getYear(value),
+                this.dateTimeAdapter.getMonth(value),
+                this.dateTimeAdapter.getDate(value)
+            )
             : null;
     }
 
+    /** The maximum selectable range. */
+    private _maxRange: number | null;
+    @Input()
+    get maxRange(): number | null {
+        return this._maxRange;
+    }
+
+    set maxRange(value: number | null) {
+        this._maxRange = this.dateTimeAdapter.isPositiveNumber(value);
+    }
+
     /** The current picker moment */
     private _pickerMoment: T;
     @Input()
@@ -173,9 +184,9 @@ export class OwlCalendarComponent<T>
     get periodButtonText(): string {
         return this.isMonthView
             ? this.dateTimeAdapter.format(
-                  this.pickerMoment,
-                  this.dateTimeFormats.monthYearLabel
-              )
+                this.pickerMoment,
+                this.dateTimeFormats.monthYearLabel
+            )
             : this.dateTimeAdapter.getYearName(this.pickerMoment);
     }
 
@@ -420,16 +431,16 @@ export class OwlCalendarComponent<T>
                 date1 &&
                 date2 &&
                 this.dateTimeAdapter.getYear(date1) ===
-                    this.dateTimeAdapter.getYear(date2) &&
+                this.dateTimeAdapter.getYear(date2) &&
                 this.dateTimeAdapter.getMonth(date1) ===
-                    this.dateTimeAdapter.getMonth(date2)
+                this.dateTimeAdapter.getMonth(date2)
             );
         } else if (this._currentView === 'year') {
             return !!(
                 date1 &&
                 date2 &&
                 this.dateTimeAdapter.getYear(date1) ===
-                    this.dateTimeAdapter.getYear(date2)
+                this.dateTimeAdapter.getYear(date2)
             );
         } else {
             return false;

projects/picker/src/lib/date-time/date-time-inline.component.ts

@@ -162,6 +162,18 @@ export class OwlDateTimeInlineComponent<T> extends OwlDateTime<T>
         this.changeDetector.markForCheck();
     }
 
+    /** The maximum valid date. */
+    private _maxRange: number | null;
+
+    get maxRangeInterval(): number | null {
+        return this._maxRange || null;
+    }
+
+    @Input('max')
+    set maxRangeInterval(value: number | null) {
+        this._maxRange = this.selectMode === 'range' ? this.dateTimeAdapter.isPositiveNumber(value) : null;
+    }
+
     private _value: T | null;
     @Input()
     get value() {

projects/picker/src/lib/date-time/date-time-picker-container.component.html

@@ -1,75 +1,83 @@
 <div [cdkTrapFocus]="picker.pickerMode !== 'inline'"
-     [@fadeInPicker]="picker.pickerMode === 'inline'? '' : 'enter'"
-     class="owl-dt-container-inner">
+    [@fadeInPicker]="picker.pickerMode === 'inline'? '' : 'enter'"
+    class="owl-dt-container-inner">
 
     <owl-date-time-calendar
-            *ngIf="pickerType === 'both' || pickerType === 'calendar'"
-            class="owl-dt-container-row"
-            [firstDayOfWeek]="picker.firstDayOfWeek"
-            [(pickerMoment)]="pickerMoment"
-            [selected]="picker.selected"
-            [selecteds]="picker.selecteds"
-            [selectMode]="picker.selectMode"
-            [minDate]="picker.minDateTime"
-            [maxDate]="picker.maxDateTime"
-            [dateFilter]="picker.dateTimeFilter"
-            [startView]="picker.startView"
-            [hideOtherMonths]="picker.hideOtherMonths"
-            (yearSelected)="picker.selectYear($event)"
-            (monthSelected)="picker.selectMonth($event)"
-            (selectedChange)="dateSelected($event)"></owl-date-time-calendar>
+        *ngIf="pickerType === 'both' || pickerType === 'calendar'"
+        class="owl-dt-container-row"
+        [firstDayOfWeek]="picker.firstDayOfWeek"
+        [(pickerMoment)]="pickerMoment"
+        [selected]="picker.selected"
+        [selecteds]="picker.selecteds"
+        [selectMode]="picker.selectMode"
+        [minDate]="picker.minDateTime"
+        [maxDate]="picker.maxDateTime"
+        [maxRange]="picker.maxRangeInterval"
+        [dateFilter]="picker.dateTimeFilter"
+        [startView]="picker.startView"
+        [hideOtherMonths]="picker.hideOtherMonths"
+        (yearSelected)="picker.selectYear($event)"
+        (monthSelected)="picker.selectMonth($event)"
+        (selectedChange)="dateSelected($event)"></owl-date-time-calendar>
 
     <owl-date-time-timer
-            *ngIf="pickerType === 'both' || pickerType === 'timer'"
-            class="owl-dt-container-row"
-            [pickerMoment]="pickerMoment"
-            [minDateTime]="picker.minDateTime"
-            [maxDateTime]="picker.maxDateTime"
-            [showSecondsTimer]="picker.showSecondsTimer"
-            [hour12Timer]="picker.hour12Timer"
-            [stepHour]="picker.stepHour"
-            [stepMinute]="picker.stepMinute"
-            [stepSecond]="picker.stepSecond"
-            (selectedChange)="timeSelected($event)"></owl-date-time-timer>
+        *ngIf="pickerType === 'both' || pickerType === 'timer'"
+        class="owl-dt-container-row"
+        [pickerMoment]="pickerMoment"
+        [minDateTime]="picker.minDateTime"
+        [maxDateTime]="picker.maxDateTime"
+        [maxRangeDateTime]="maxRangeToValue"
+        [showSecondsTimer]="picker.showSecondsTimer"
+        [hour12Timer]="picker.hour12Timer"
+        [stepHour]="picker.stepHour"
+        [stepMinute]="picker.stepMinute"
+        [stepSecond]="picker.stepSecond"
+        (selectedChange)="timeSelected($event)"></owl-date-time-timer>
 
     <div *ngIf="picker.isInRangeMode"
          role="radiogroup"
          class="owl-dt-container-info owl-dt-container-row">
         <div role="radio" [tabindex]="activeSelectedIndex === 0 ? 0 : -1"
-             [attr.aria-checked]="activeSelectedIndex === 0"
-             class="owl-dt-control owl-dt-container-range owl-dt-container-from"
-             [ngClass]="{'owl-dt-container-info-active': activeSelectedIndex === 0}"
-             (click)="handleClickOnInfoGroup($event, 0)"
-             (keydown)="handleKeydownOnInfoGroup($event, to, 0)" #from>
+            [attr.aria-checked]="activeSelectedIndex === 0"
+            class="owl-dt-control owl-dt-container-range owl-dt-container-from"
+            [ngClass]="{'owl-dt-container-info-active': activeSelectedIndex === 0}"
+            (click)="handleClickOnInfoGroup($event, 0)"
+            (keydown)="handleKeydownOnInfoGroup($event, to, 0)" #from>
             <span class="owl-dt-control-content owl-dt-container-range-content" tabindex="-1">
                 <span class="owl-dt-container-info-label">{{fromLabel}}:</span>
                 <span class="owl-dt-container-info-value">{{fromFormattedValue}}</span>
             </span>
         </div>
         <div role="radio" [tabindex]="activeSelectedIndex === 1 ? 0 : -1"
-             [attr.aria-checked]="activeSelectedIndex === 1"
-             class="owl-dt-control owl-dt-container-range owl-dt-container-to"
-             [ngClass]="{'owl-dt-container-info-active': activeSelectedIndex === 1}"
-             (click)="handleClickOnInfoGroup($event, 1)"
-             (keydown)="handleKeydownOnInfoGroup($event, from, 1)" #to>
+            [attr.aria-checked]="activeSelectedIndex === 1"
+            class="owl-dt-control owl-dt-container-range owl-dt-container-to"
+            [ngClass]="{'owl-dt-container-info-active': activeSelectedIndex === 1}"
+            (click)="handleClickOnInfoGroup($event, 1)"
+            (keydown)="handleKeydownOnInfoGroup($event, from, 1)" #to>
             <span class="owl-dt-control-content owl-dt-container-range-content" tabindex="-1">
                 <span class="owl-dt-container-info-label">{{toLabel}}:</span>
                 <span class="owl-dt-container-info-value">{{toFormattedValue}}</span>
             </span>
         </div>
     </div>
 
+    <div class="owl-dt-container-row" *ngIf="setButtonEnabled()">
+        <span class="owl-dt-control-error-message-content">
+            {{ errMessage }} </span>
+
+    </div>
     <div *ngIf="showControlButtons" class="owl-dt-container-buttons owl-dt-container-row">
         <button class="owl-dt-control owl-dt-control-button owl-dt-container-control-button"
-                type="button" tabindex="0"
-                (click)="onCancelClicked($event)">
+            type="button" tabindex="0"
+            (click)="onCancelClicked($event)">
             <span class="owl-dt-control-content owl-dt-control-button-content" tabindex="-1">
                 {{cancelLabel}}
             </span>
         </button>
         <button class="owl-dt-control owl-dt-control-button owl-dt-container-control-button"
                 type="button" tabindex="0"
-                (click)="onSetClicked($event)">
+                (click)="onSetClicked($event)"
+                [disabled]="setButtonEnabled()">
             <span class="owl-dt-control-content owl-dt-control-button-content" tabindex="-1">
                 {{setLabel}}
             </span>