1. Home
  2. Forum
  3. React - EJ 2
  4. Custom validation for two dates

Custom validation for two dates

I want to add the following validation. I have two dates, StartDate and EndDate, how can I display a validation message if the difference between the end date and the start date is not equal to 2? Specifically, I want this error to be displayed every time 2 dates are added and the difference between the end date and the start date is not 2 hours and only when the difference between the two is 2 hours can the event be created from editor template modal.


3 Replies
SK Satheesh Kumar Balasubramanian Syncfusion Team May 23, 2022 01:56 PM UTC

Hi Cezar,

We have prepared sample to achieve custom validation for two dates.

https://stackblitz.com/edit/react-schedule-custom-validation-start-end-date?file=index.js

index.js:

export class EditorFieldValidation extends SampleBase {
  scheduleObj;
  scheduleStartTime;
  scheduleEndTime;
  data = extend([], dataSource.scheduleData, null, true);
  fields = {
    subject: { name: 'Subject', validation: { required: true } },
    location: {
      name: 'Location',
      validation: {
        required: true,
        regex: [
          '^[a-zA-Z0-9- ]*$',
          'Special characters are not allowed in this field',
        ],
      },
    },
    description: {
      name: 'Description',
      validation: {
        required: true,
        minLength: 5,
        maxLength: 500,
      },
    },
    startTime: {
      name: 'StartTime',
      validation: {
        required: true,
      },
    },
    endTime: {
      name: 'EndTime',
      validation: {
        required: true,
        range: [
          this.customEndFn,
          'Difference between the end date and the start date is not 2 hours',
        ],
      },
    },
  };
  customEndFn(args) {
    this.scheduleStartTime = new Date(
      document.querySelector('#StartTime').value
    ).getTime();
    this.scheduleEndTime = new Date(args.element.value).getTime();
    return this.scheduleEndTime - this.scheduleStartTime === 7200000;
  }
  onEventRendered(args) {
    applyCategoryColor(args, this.scheduleObj.currentView);
  }
  render() {
    return (
      <div className="schedule-control-section">
        <div className="col-lg-12 control-section">
          <div className="control-wrapper">
            <ScheduleComponent
              width="100%"
              height="550px"
              selectedDate={new Date(2021, 0, 10)}
              ref={(t) => (this.scheduleObj = t)}
              eventSettings={{ dataSource: this.data, fields: this.fields }}
              eventRendered={this.onEventRendered.bind(this)}
            >
              <Inject
                services={[Day, Week, WorkWeek, Month, Resize, DragAndDrop]}
              />
            </ScheduleComponent>
          </div>
        </div>
      </div>
    );
  }
}

Kindly try the above sample and let us know if this meets your requirement.

Regards,
Satheesh Kumar B

CE Cezar May 23, 2022 08:20 PM UTC

It works very well. Thank you :)


SK Satheesh Kumar Balasubramanian Syncfusion Team May 24, 2022 07:27 AM UTC

Hi Cezar,

Thanks for the update.

We are happy that your problem has been resolved now.

Regards,
Satheesh Kumar B

Loader.
Up arrow icon