'Start date should not be greater than end date' - How can we implement this validation in customized editor window

Question

I have created a customized editor window with only two fields, start date, and end date.

I want to implement the Date validations, like the start date can not be greater than the end date.

How can add customized validation?

here is my code block:

.ts

const startElement: HTMLInputElement = args.element.querySelector(
                '#StartTime'
            ) as HTMLInputElement;
 if (!startElement.classList.contains('e-datetimepicker')) {
     const maxDate: Date = new Date(args.data['OriginalStartTime']);
     const start: any = new DateTimePicker(
      {
       value: new Date(startElement.value) || new Date(),
       min: minPreponeDate,
       max: new Date(maxDate.setDate(maxDate.getDate() + maxPostponedays)),
       strictMode: true,
       },
       startElement
     );
  }
const endElement: HTMLInputElement = args.element.querySelector(
                '#EndTime'
            ) as HTMLInputElement;
 if (!endElement.classList.contains('e-datetimepicker')) {
     const maxDate: Date = new Date(args.data['OriginalStartTime']);
     const end: any = new DateTimePicker(
      {
       value: new Date(new Date(endElement.value)) || new Date(),
       min: minPreponeDate,
       max: new Date(maxDate.setDate(maxDate.getDate() + maxPostponedays)),
       strictMode: true,
     },
     endElement
  );
}
-----------------------------
.html file

<ng-template #editorTemplate let-data>
                <table class="custom-event-editor" width="100%" cellpadding="5">
                    <tbody>
                        <tr>
                            <td class="e-textlabel">Enter Start datetd>
                            <td colspan="4">
                                <input
                                    id="StartTime"
                                    class="e-field"
                                    type="text"
                                    name="StartTime"
                                />
                            td>
                        tr>
                        <tr>
                            <td class="e-textlabel">Enter End datetd>
                            <td colspan="4">
                                <input
                                    id="EndTime"
                                    class="e-field"
                                    type="text"
                                    name="EndTime"
                                />
                            td>
                        tr>
                    tbody>
                table>
            ng-template>

Enter Start datetd>	td> tr>
Enter End datetd>	td> tr> tbody> table> ng-template>

Hareesh Balasubramanian · Answer

Hi Kanth, 

Greetings from Syncfusion Support. 

You can implement the date validation in custom editor using  popupClose event and for the same we have prepared a sample for your reference which can be viewed from the following link. 
https://stackblitz.com/edit/angular-xb8w2x-hirrpe?file=app.component.ts 

Code snippet: 




  public onPopupClose(args) { 
    this.startDate = null; 
    this.endDate = null; 
    if (args.type == "Editor" && (this.scheduleObj as any).eventWindow.isCrudAction) { 
      var bool = !(args.data.StartTime.getTime() < args.data.EndTime.getTime()); 
      if (bool) { 
        args.cancel = true; 
        alert("End time must be greater than Start time "); 
      } 
    } 
  } 

Kindly try the sample and get back to us if you need any further assistance. 

Regards, 
Hareesh