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"
    [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>

Min & max date validation

View on GitHub
Selected value should be after "2/13/25, 11:44 AM", received "2/10/25, 11:44 AM".

Selected value should be before "2/7/25, 11:44 AM", received "2/10/25, 11:44 AM". 
<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>

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>

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>