DanielYKPan / date-time-picker

Angular Date Time Picker (Responsive Design)

Home Page:https://daniel-projects.firebaseapp.com/owlng/date-time-picker

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

cannot set max (maximum valid date time) in owl-date-time-inline

firashamila33 opened this issue · comments

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>
commented

@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