From 45711eac6968bbb4b25e0bab53aedb0ac3779041 Mon Sep 17 00:00:00 2001 From: "namita.mehta" Date: Mon, 1 Mar 2021 15:56:57 +0530 Subject: [PATCH 1/2] Added Max Range Property --- .../adapter/date-time-adapter.class.ts | 10 +++ .../calendar-month-view.component.ts | 56 ++++++++---- .../src/lib/date-time/calendar.component.html | 1 + .../src/lib/date-time/calendar.component.ts | 39 +++++--- .../date-time/date-time-inline.component.ts | 12 +++ .../date-time-picker-container.component.html | 90 ++++++++++--------- .../date-time-picker-container.component.ts | 52 ++++++++++- .../date-time-picker-input.directive.ts | 16 ++++ .../date-time/date-time-picker.component.ts | 7 +- .../src/lib/date-time/date-time.class.ts | 2 + .../src/lib/date-time/timer.component.ts | 22 ++++- projects/picker/src/sass/picker.scss | 6 ++ src/app/app.component.html | 16 +++- src/app/app.component.ts | 13 ++- src/styles.sass | 3 +- 15 files changed, 255 insertions(+), 90 deletions(-) diff --git a/projects/picker/src/lib/date-time/adapter/date-time-adapter.class.ts b/projects/picker/src/lib/date-time/adapter/date-time-adapter.class.ts index 9e2b1464..97826aed 100644 --- a/projects/picker/src/lib/date-time/adapter/date-time-adapter.class.ts +++ b/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( @@ -300,4 +301,13 @@ export abstract class DateTimeAdapter { } return date; } + + isPositiveNumber(val: any): number | null { + if (coerceNumberProperty(val) > 0) { + return val; + } else { + return null; + } + } + } diff --git a/projects/picker/src/lib/date-time/calendar-month-view.component.ts b/projects/picker/src/lib/date-time/calendar-month-view.component.ts index 6f1fae47..b8074df4 100644 --- a/projects/picker/src/lib/date-time/calendar-month-view.component.ts +++ b/projects/picker/src/lib/date-time/calendar-month-view.component.ts @@ -130,6 +130,12 @@ export class OwlMonthViewComponent 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 } } + /** 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 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,13 +424,13 @@ export class OwlMonthViewComponent 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; @@ -421,13 +438,13 @@ export class OwlMonthViewComponent 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 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 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) ); } diff --git a/projects/picker/src/lib/date-time/calendar.component.html b/projects/picker/src/lib/date-time/calendar.component.html index cd2110c7..ae4e6fc9 100644 --- a/projects/picker/src/lib/date-time/calendar.component.html +++ b/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)" diff --git a/projects/picker/src/lib/date-time/calendar.component.ts b/projects/picker/src/lib/date-time/calendar.component.ts index 96d89186..16f23452 100644 --- a/projects/picker/src/lib/date-time/calendar.component.ts +++ b/projects/picker/src/lib/date-time/calendar.component.ts @@ -66,10 +66,10 @@ export class OwlCalendarComponent 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 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 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 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; diff --git a/projects/picker/src/lib/date-time/date-time-inline.component.ts b/projects/picker/src/lib/date-time/date-time-inline.component.ts index 1e58f5a8..20408892 100644 --- a/projects/picker/src/lib/date-time/date-time-inline.component.ts +++ b/projects/picker/src/lib/date-time/date-time-inline.component.ts @@ -162,6 +162,18 @@ export class OwlDateTimeInlineComponent extends OwlDateTime 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() { diff --git a/projects/picker/src/lib/date-time/date-time-picker-container.component.html b/projects/picker/src/lib/date-time/date-time-picker-container.component.html index 9e484d62..1900c3d4 100644 --- a/projects/picker/src/lib/date-time/date-time-picker-container.component.html +++ b/projects/picker/src/lib/date-time/date-time-picker-container.component.html @@ -1,57 +1,59 @@
+ [@fadeInPicker]="picker.pickerMode === 'inline'? '' : 'enter'" + class="owl-dt-container-inner"> + *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)"> + *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)">
+
+ + {{ errMessage }} + +