We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

maximum limit in Datepicker within the schedule.

Hello,

How do I put a maximum limit on the datepicker within the schedule. When placing the start date, I need the limit of the end date to be a maximum of 7 days.


3 Replies

RV Ravikumar Venkatesan Syncfusion Team January 12, 2023 04:55 PM UTC

Hi Alexandre,


Sample: https://stackblitz.com/edit/ej2-angular-schedule-change-end-based-on-start?file=src%2Fapp.component.ts


You can achieve your requirement with help of the popupOpen event of the Schedule as shown in the below code snippet.


[app.component.ts]

export class AppComponent {

  public onPopupOpen(argsPopupOpenEventArgs): void {

    if(args.type === 'Editor') {

      var startObj = (args.element.querySelector('.e-start.e-field'as EJ2Instance).ej2_instances[0];

      var endObj = (args.element.querySelector('.e-end.e-field'as EJ2Instance).ej2_instances[0];

      if(startObj && endObj) {

        startObj.change = (args=> {

          this.setLimit(args.valueendObj.valueendObj);

        }

        endObj.change = (args=> {

          this.setLimit(startObj.valueargs.valueendObj);

        }

      }

      this.setLimit(args.data.StartTimeargs.data.EndTimeendObj);

    }

  }

 

  public setLimit(startendendObj) {

    if((end.getTime() - start.getTime()) > 604800000 || end.getTime() < start.getTime()) {

      // Limit maximum end date time after 7 days from start time.

      endObj.value = addDays(start6);

    }

  }

}


Regards,

Ravikumar Venkatesan



AL Alexandre January 12, 2023 08:04 PM UTC

To validate and block the days, not letting the user choose the date by the datepicker and writing it in the input

I want to put a validation if the user writes in the input a value above 7 days. Appearing the modal (dialog) informing about the limit of days allowed.



RV Ravikumar Venkatesan Syncfusion Team January 13, 2023 04:49 PM UTC

Hi Alexandre,


Sample: https://stackblitz.com/edit/ej2-angular-schedule-start-end-validation?file=src%2Fapp.component.ts

UG: https://ej2.syncfusion.com/angular/documentation/schedule/editor-template#field-validation


You can add validation to the editor window start and end time fields in the Schedule eventSettings fields property as shown in the below code snippet.


[app.component.ts]

export class AppComponent {

  public eventSettingsEventSettingsModel = {

    dataSource: this.data,

    fields: {

      id: 'Id',

      startTime: { name: 'StartTime'validation: { required: truedate: [this.dateValidation'Maximum limit is 7 days'] } },

      endTime: { name: 'EndTime'validation: { required: truedate: [this.dateValidation'Maximum limit is 7 days'] } },

    }

  };

 

  public dateValidation(args): boolean {

    const start = (document.querySelector('#StartTime'as EJ2Instance).ej2_instances[0].value.getTime();

    const end = (document.querySelector('#EndTime'as EJ2Instance).ej2_instances[0].value.getTime();

    return (end - start) < 604800000;

  }

}


Regards,

Ravikumar Venkatesan


Loader.
Live Chat Icon For mobile
Up arrow icon