Custom Directive in Angular 17

Hi Jayraj

   Where these 2 fields are to be given. 

startAt , endAt.  Can these 2 variables can be passed from any component or these are Static.

const start: Date = control.get('startAt').value;
    const end: Date = control.get('endAt').value;

Thanks

To implement date comparison using a custom directive in Angular, you can create a directive that utilizes the provided date range validation logic. You should place this code in a separate TypeScript file, typically named something like date-range.validator.ts.

import { Directive } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';

@Directive({
  selector: '[appDateRangeValidator]',
  providers: [{ provide: NG_VALIDATORS, useExisting: DateRangeValidatorDirective, multi: true }]
})
export class DateRangeValidatorDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    const start: Date = control.get('startAt').value;
    const end: Date = control.get('endAt').value;

    if (start && end) {
      const isRangeValid = end.getTime() - start.getTime() > 0;
      return isRangeValid ? null : { dateRange: true };
    }

    return null;
  }
}

You can then use this directive in your component's template by adding the appDateRangeValidator attribute to the form element that contains the date inputs you want to validate: