date-time-picker
date-time-picker copied to clipboard
cannot set max (maximum valid date time) in owl-date-time-inline
I am using owl-date-time-inline
with range
as selectMode
Use case :
when a user selects a from Date
, I want to limit the date To
selection, for example, the user can only select a range of 5 days ( 170 hours ).
- I used
[max]
property but didn't work - I used
owlDateTimeFilter
property to a function that blocks the dates, but that function gets triggered before ngModelChange is triggered
ts component Code:
import { Component } from "@angular/core";
import addHours from "date-fns/addHours";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
selectedDateRange: Date;
timePickerMaxDate: Date;
public onDatesChange = (dates: [Date, Date]): void => {
const dateFrom = dates[0];
const dateTo = dates[1];
this.dateFrom = dateFrom;
this.dateTo = dateTo;
if (dateTo === null) {
const timePickerMaxDate = addHours(dateFrom, 170);
this.timePickerMaxDate = timePickerMaxDate;
}
};
public timePickerMaxDatefn = (date: Date): boolean => {
if (this.dateFrom && !this.dateTo) {
const dateToLimit = addHours(this.dateFrom, FILTERING_EVENTS_MAX_TIME_RANGE_HOURS);
const isDateAfterLimit = compareAsc(date, dateToLimit);
if (isDateAfterLimit === 1) {
return false;
}
return true;
}
return true;
}
}
Html component
<owl-date-time-inline
[selectMode]="'range'"
[max]="timePickerMaxDate" <== not working
[owlDateTimeFilter]="timePickerMaxDatefn" <== also not working
[(ngModel)]="selectedDateRange"
(ngModelChange)="onDatesChange($event)"
>
</owl-date-time-inline>
@firashamila33 Hi, I have the same problem. Were you able to solve it or find a workaround?
I have solved this problem with the help of dateSelected event of owl-date-time. Moreon that here: https://stackoverflow.com/a/76218420/11336654