nxt-components logo nxt-components
Github

Validation

When used with [ngModel] or [formControl], date & time picker provides control validation.


Examples

Invalid input

View on GitHub

If input value isn't a vaild date string, a validation error will be shown. Change the input field value to see it in action.

<input class="form-control"
    [class.is-invalid]="dateTimeControl.invalid"
    [(ngModel)]="value"
    #dateTimeControl="ngModel"
    placeholder="Date and time"
    [nxtDateTimeTrigger]="picker"
    [nxtDateTime]="picker">
<nxt-date-time #picker></nxt-date-time>
@if (dateTimeControl.errors?.['dateTimeParse']; as parseError) {
<div class="invalid-feedback">
    Input is not a valid date string, received "{{ parseError.text }}".
</div>
}
import { Component, ViewEncapsulation } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { DateTimeComponent, DateTimeInputDirective, DateTimeTriggerDirective } from 'nxt-pick-datetime'
 
@Component({
    selector: 'app-invalid-input',
    templateUrl: './invalid-input.component.html',
    styleUrls: ['./invalid-input.component.css'],
    encapsulation: ViewEncapsulation.Emulated,
    imports: [
        DateTimeTriggerDirective,
        DateTimeInputDirective,
        DateTimeComponent,
        FormsModule
    ]
})
export class InvalidInputComponent {
    value = new Date()
}

Min & max date validation

View on GitHub
Selected value should be after "12/26/25, 11:21 PM", received "12/23/25, 11:21 PM".

Selected value should be before "12/20/25, 11:21 PM", received "12/23/25, 11:21 PM". 
<input class="form-control"
    [class.is-invalid]="minDateTimeControl.invalid"
    [(ngModel)]="value"
    #minDateTimeControl="ngModel"
    placeholder="Date and time"
    [nxtDateTimeTrigger]="pickerMin"
    [nxtDateTime]="pickerMin"
    [min]="min">
<nxt-date-time #pickerMin></nxt-date-time>
@if (minDateTimeControl.errors?.['dateTimeMin']; as minError) {
<div class="invalid-feedback">
    Selected value should be after "{{ minError.min | date:'short' }}", received "{{ minError.actual | date:'short' }}".
</div>
}
<br>
<input class="form-control"
    [class.is-invalid]="maxDateTimeControl.invalid"
    [(ngModel)]="value"
    #maxDateTimeControl="ngModel"
    placeholder="Date and time"
    [nxtDateTimeTrigger]="pickerMax"
    [nxtDateTime]="pickerMax"
    [max]="max">
<nxt-date-time #pickerMax></nxt-date-time>
@if (maxDateTimeControl.errors?.['dateTimeMax']; as maxError) {
<div class="invalid-feedback">
    Selected value should be before "{{ maxError.max | date:'short' }}", received "{{ maxError.actual | date:'short' }}".
</div>
}
import { DatePipe } from '@angular/common'
import { Component, ViewEncapsulation } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { DateTimeComponent, DateTimeInputDirective, DateTimeTriggerDirective } from 'nxt-pick-datetime'
 
@Component({
    selector: 'app-validate-min-max',
    templateUrl: './min-max.component.html',
    styleUrls: ['./min-max.component.css'],
    encapsulation: ViewEncapsulation.Emulated,
    imports: [
        DateTimeTriggerDirective,
        DateTimeInputDirective,
        DateTimeComponent,
        FormsModule,
        DatePipe
    ]
})
export class ValidateMinMaxComponent {
    value = new Date()
 
    min = new Date(this.value.getTime() + 3 * 24 * 60 * 60 * 1000) // 2 days after value
 
    max = new Date(this.value.getTime() - 3 * 24 * 60 * 60 * 1000) // 2 days before value
}

Custom date filtering function

View on GitHub
Selected date can't be a Sunday. 
<input class="form-control"
    [class.is-invalid]="dateTimeControl.invalid"
    [(ngModel)]="value"
    #dateTimeControl="ngModel"
    placeholder="Date and time"
    [nxtDateTimeTrigger]="picker"
    [nxtDateTime]="picker"
    [dateTimeFilter]="dateTimeFilter">
<nxt-date-time #picker></nxt-date-time>
@if (dateTimeControl.errors?.['dateTimeFilter']) {
<div class="invalid-feedback">
    Selected date can't be a Sunday.
</div>
}
import { Component, ViewEncapsulation } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { DateFilter, DateTimeComponent, DateTimeInputDirective, DateTimeTriggerDirective } from 'nxt-pick-datetime'
 
const lastSunday = new Date()
lastSunday.setDate(lastSunday.getDate() - lastSunday.getDay())
 
@Component({
    selector: 'app-filter',
    templateUrl: './filter.component.html',
    styleUrls: ['./filter.component.css'],
    encapsulation: ViewEncapsulation.Emulated,
    imports: [
        DateTimeTriggerDirective,
        DateTimeInputDirective,
        DateTimeComponent,
        FormsModule
    ]
})
export class FilterComponent {
    value = lastSunday
 
    dateTimeFilter: DateFilter<Date> = (date) => {
        // Don't allow Sundays
        if (date?.getDay() == 0)
            return false
 
        return true
    }
}

Invalid date range

View on GitHub
"Range.to" should be greater than "range.from". 
<input class="form-control"
    [class.is-invalid]="dateTimeControl.invalid"
    [(ngModel)]="value"
    #dateTimeControl="ngModel"
    placeholder="Date and time"
    selectMode="range"
    [nxtDateTimeTrigger]="picker"
    [nxtDateTime]="picker">
<nxt-date-time #picker></nxt-date-time>
@if (dateTimeControl.errors?.['dateTimeRange']) {
<div class="invalid-feedback">
    "Range.to" should be greater than "range.from".
</div>
}
import { Component, ViewEncapsulation } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { DateTimeComponent, DateTimeInputDirective, DateTimeTriggerDirective } from 'nxt-pick-datetime'
 
@Component({
    selector: 'app-range',
    templateUrl: './range.component.html',
    styleUrls: ['./range.component.css'],
    encapsulation: ViewEncapsulation.Emulated,
    imports: [
        DateTimeTriggerDirective,
        DateTimeInputDirective,
        DateTimeComponent,
        FormsModule
    ]
})
export class RangeComponent {
    value = [
        new Date(), // from = now
        new Date(Date.now() - 2 * 24 * 60 * 60 * 1000) // to = now - 2 days, resulting in an invalid range
    ]
}