date-time-picker icon indicating copy to clipboard operation
date-time-picker copied to clipboard

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

Open firashamila33 opened this issue 4 years ago • 2 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>

firashamila33 avatar Feb 03 '21 17:02 firashamila33

@firashamila33 Hi, I have the same problem. Were you able to solve it or find a workaround?

sseth avatar Jun 26 '21 21:06 sseth

I have solved this problem with the help of dateSelected event of owl-date-time. Moreon that here: https://stackoverflow.com/a/76218420/11336654

andriyviychuk avatar May 10 '23 12:05 andriyviychuk