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"
    [ngClass]="{ 'is-invalid': dateTimeControl.invalid }"
    [(ngModel)]="value"
    #dateTimeControl="ngModel"
    placeholder="Date and time"
    [nxtDateTimeTrigger]="picker"
    [nxtDateTime]="picker">
<nxt-date-time #picker></nxt-date-time>
<div class="invalid-feedback"
    *ngIf="dateTimeControl.errors?.['dateTimeParse'] as parseError">
    Input is not a valid date string, received "{{ parseError.text }}".
</div>
import { Component, ViewEncapsulation } from '@angular/core'
 
@Component({
    selector: 'app-invalid-input',
    templateUrl: './invalid-input.component.html',
    styleUrls: ['./invalid-input.component.css'],
    encapsulation: ViewEncapsulation.Emulated
})
export class InvalidInputComponent {
    value = new Date()
}

Min & max date validation

View on GitHub
Selected value should be after "5/2/24, 2:32 PM", received "4/29/24, 2:32 PM".

Selected value should be before "4/26/24, 2:32 PM", received "4/29/24, 2:32 PM". 
<input class="form-control"
    [ngClass]="{ '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>
<div class="invalid-feedback"
    *ngIf="minDateTimeControl.errors?.['dateTimeMin'] as minError">
    Selected value should be after "{{ minError.min | date:'short' }}", received "{{ minError.actual | date:'short' }}".
</div>
<br>
<input class="form-control"
    [ngClass]="{ '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>
<div class="invalid-feedback"
    *ngIf="maxDateTimeControl.errors?.['dateTimeMax'] as maxError">
    Selected value should be before "{{ maxError.max | date:'short' }}", received "{{ maxError.actual | date:'short' }}".
</div>
import { Component, ViewEncapsulation } from '@angular/core'
 
@Component({
    selector: 'app-validate-min-max',
    templateUrl: './min-max.component.html',
    styleUrls: ['./min-max.component.css'],
    encapsulation: ViewEncapsulation.Emulated
})
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"
    [ngClass]="{ '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>
<div class="invalid-feedback"
    *ngIf="dateTimeControl.errors?.['dateTimeFilter']">
    Selected date can't be a Sunday.
</div>
import { Component, ViewEncapsulation } from '@angular/core'
import { DateFilter } 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
})
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"
    [ngClass]="{ '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>
<div class="invalid-feedback"
    *ngIf="dateTimeControl.errors?.['dateTimeRange']">
    "Range.to" should be greater than "range.from".
</div>
import { Component, ViewEncapsulation } from '@angular/core'
 
@Component({
    selector: 'app-range',
    templateUrl: './range.component.html',
    styleUrls: ['./range.component.css'],
    encapsulation: ViewEncapsulation.Emulated
})
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
    ]
}