DanielYKPan / date-time-picker

Angular Date Time Picker (Responsive Design)
https://daniel-projects.firebaseapp.com/owlng/date-time-picker
MIT License
565 stars 356 forks source link

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

Open firashamila33 opened 3 years ago

firashamila33 commented 3 years ago

I am usingowl-date-time-inline with range as selectMode

Use case : when a user selects afrom Date, I want to limit the date To selection, for example, the user can only select a range of 5 days ( 170 hours ).

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>
sseth commented 3 years ago

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

andriyviychuk commented 1 year ago

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