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

[Kanth V]

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>

[Hareesh Balasubramanian]

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