dateRangeValidator

The dateRangeValidator is a custom validator that validates a date falls within a specified range. It supports validation for both date-only values and date-time values, with configurable inclusive/exclusive boundaries and optional time comparison.

Examples

Example 1: Date Range Validation

Validate that a date falls between a minimum and maximum date. This configuration ensures that the selected date must fall between September 1st, 2024, and September 15th, 2024 (exclusive), ignoring the time components. Sep. 15th is not valid since maxInclusive is false.

import {dateRangeValidator} from 'ngx-lift';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';

@Component({
  imports: [ReactiveFormsModule],
})
export class DateRangeExampleComponent {
  validator = dateRangeValidator({
    minDate: '2024-09-01', // or new Date('2024-09-01')
    maxDate: '2024-09-15',
    minInclusive: true,
    maxInclusive: false,
    compareTime: false,
  });

  form = new FormGroup({
    date: new FormControl('', [this.validator]),
  });
}

Example 2: Select a Future Date

Below example allows to select a future date and include today. To include the minDate, set minInclusive to true.

import {dateRangeValidator} from 'ngx-lift';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';

@Component({
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="dateForm">
      <clr-input-container>
        <label>Expiration Date</label>
        <input type="date" clrInput [formControl]="dateForm.controls.expires" [min]="todayInISO" />
        <clr-control-error *clrIfError="'minDate'; error as minDate">
          The date cannot be earlier than {{ minDate }}
        </clr-control-error>
      </clr-input-container>

      <clr-date-container>
        <label class="clr-required-mark">Future 5 Days</label>
        <input type="date" clrDate [formControl]="dateForm.controls.futureDays" required [min]="tomorrowInISO" [max]="fiveDaysLaterInISO" />
        <clr-control-error *clrIfError="'required'">Required</clr-control-error>
        <clr-control-error *clrIfError="'invalidDate'">The date is invalid</clr-control-error>
        <clr-control-error *clrIfError="'maxDate'; error as maxDate">
          The date cannot be later than {{ maxDate }}
        </clr-control-error>
        <clr-control-error *clrIfError="'minDate'; error as minDate">
          The date cannot be earlier than {{ minDate }}
        </clr-control-error>
      </clr-date-container>
    </form>
  `
})
export class DateRangeValidatorComponent {
  today = new Date();
  tomorrow = new Date(new Date().getTime() + 1 * 24 * 60 * 60 * 1000);
  fiveDaysLater = new Date(new Date().getTime() + 5 * 24 * 60 * 60 * 1000);

  todayInISO = this.today.toISOString().split('T')[0];
  tomorrowInISO = this.tomorrow.toISOString().split('T')[0];
  fiveDaysLaterInISO = this.fiveDaysLater.toISOString().split('T')[0];

  dateForm = new FormGroup({
    expires: new FormControl<string>('', {
      nonNullable: true,
      validators: [dateRangeValidator({minDate: this.today, minInclusive: true})],
    }),
    futureDays: new FormControl<string>('', {
      nonNullable: true,
      validators: [
        Validators.required,
        dateRangeValidator({
          maxDate: this.fiveDaysLater,
          maxInclusive: true,
          minDate: this.tomorrow,
          minInclusive: true,
        }),
      ],
    }),
  });
}

We could use the min and max pattern to validate the range. However, this validation will not fail when typing a number like 12 or a string like 12hello.

Example 3: Date and Time Range Validation

To validate both the date and the time, set compareTime to true. With the below configuration, the selected date and time must fall between September 1st, 2024, at noon UTC, and September 2nd, 2024, at noon UTC, considering the time components.

import {dateRangeValidator} from 'ngx-lift';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';

@Component({
  imports: [ReactiveFormsModule],
})
export class DateTimeRangeExampleComponent {
  validator = dateRangeValidator({
    minDate: '2024-09-01T12:00:00Z',
    maxDate: '2024-09-02T12:00:00Z',
    compareTime: true,
  });

  form = new FormGroup({
    dateTime: new FormControl('', [this.validator]),
  });
}

import {dateRangeValidator} from 'ngx-lift';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';

@Component({
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="dateTimeForm">
      <clr-input-container>
        <label class="clr-required-mark">Expiration Date</label>
        <input type="datetime-local" clrInput [formControl]="dateTimeForm.controls.expires" required [min]="minTimestamp" [max]="maxTimestamp" />
        <clr-control-error *clrIfError="'required'">Required</clr-control-error>
        <clr-control-error *clrIfError="'minDate'; error as minDate">
          The date time cannot be earlier than {{ minDate }}
        </clr-control-error>
        <clr-control-error *clrIfError="'maxDate'; error as maxDate">
          The date time cannot be later than {{ maxDate }}
        </clr-control-error>
      </clr-input-container>
    </form>
  `
})
export class DateTimeRangeValidatorComponent {
  today = new Date();
  fiveDaysLater = new Date(new Date().getTime() + 5 * 24 * 60 * 60 * 1000);

  minTimestamp = this.today.toISOString().slice(0, 16);
  maxTimestamp = this.fiveDaysLater.toISOString().slice(0, 16);

  dateTimeForm = new FormGroup({
    expires: new FormControl<string>('', {
      nonNullable: true,
      validators: [
        Validators.required,
        dateRangeValidator({minDate: this.today, maxDate: this.fiveDaysLater, compareTime: true}),
      ],
    }),
  });
}

API Reference

dateRangeValidator

Validates that a date falls within a specified range.

Signature

dateRangeValidator(options: DateRangeOptions): ValidatorFn

interface DateRangeOptions {
  minDate?: Date | string;
  maxDate?: Date | string;
  minInclusive?: boolean;
  maxInclusive?: boolean;
  compareTime?: boolean;
}

Parameters

options: DateRangeOptions
Configuration options for date range validation:
- minDate?: Date | string - The minimum allowed date. If provided, the selected date must be equal to or later than this date.
- maxDate?: Date | string - The maximum allowed date. If provided, the selected date must be equal to or earlier than this date.
- minInclusive?: boolean - Whether the comparison for the minimum date can include the exact date. Defaults to false.
- maxInclusive?: boolean - Whether the comparison for the maximum date can include the exact date. Defaults to false.
- compareTime?: boolean - Whether to compare the time as well. If true, comparisons will include the time components of the date; if false, the time parts will be ignored. Defaults to false.

Returns

A validator function that can be used with Angular Reactive Forms.

Validation Errors

invalidDate - Returned when the date is invalid (e.g., "2023-13-01" or "hello world")
minDate - Returned when the selected date is earlier than or equal to the minimum allowed date. The error value is the minimum allowed date formatted as an ISO string.
maxDate - Returned when the selected date is later than or equal to the maximum allowed date. The error value is the maximum allowed date formatted as an ISO string.