nxt-components
Github

Angular date & time picker

GitHub license  npm  scope

Simple responsive Angular date and time picker.


Demo

Basic usage

View on GitHub
<input class="form-control"
    [(ngModel)]="date"
    placeholder="Date and time"
    [nxtDateTimeTrigger]="picker"
    [nxtDateTime]="picker">
<nxt-date-time #picker></nxt-date-time>
import { Component, ViewEncapsulation } from '@angular/core'
 
@Component({
    selector: 'app-basic-example',
    templateUrl: './basic-example.component.html',
    styleUrls: ['./basic-example.component.css'],
    encapsulation: ViewEncapsulation.Emulated
})
export class BasicExampleComponent {
    date?: Date
}

Calendar only

View on GitHub
<input class="form-control"
    [(ngModel)]="date"
    placeholder="Date"
    [nxtDateTimeTrigger]="picker"
    [nxtDateTime]="picker">
<nxt-date-time #picker
    pickerType="calendar"></nxt-date-time>

Time only

View on GitHub
<input class="form-control"
    [(ngModel)]="date"
    placeholder="Time"
    [nxtDateTimeTrigger]="picker"
    [nxtDateTime]="picker">
<nxt-date-time #picker
    pickerType="timer"></nxt-date-time>

Trigger via an icon

View on GitHub
<div class="input-group">
    <input class="form-control"
        [(ngModel)]="date"
        placeholder="Date and time"
        [nxtDateTime]="picker">
    <nxt-date-time #picker></nxt-date-time>
    <button class="btn btn-outline-secondary"
        type="button"
        [nxtDateTimeTrigger]="picker">
        <svg viewBox="0 0 16 16">
            <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"></path>
            <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"></path>
        </svg>
    </button>
</div>

Select range

View on GitHub
<input class="form-control"
    [(ngModel)]="range"
    placeholder="Date time tange"
    selectMode="range"
    [nxtDateTimeTrigger]="picker"
    [nxtDateTime]="picker">
<nxt-date-time #picker></nxt-date-time>
import { Component, ViewEncapsulation } from '@angular/core'
 
@Component({
    selector: 'app-select-range',
    templateUrl: './select-range.component.html',
    styleUrls: ['./select-range.component.css'],
    encapsulation: ViewEncapsulation.Emulated
})
export class SelectRangeComponent {
    range?: Date[]
}

Min and max date

View on GitHub
<input class="form-control"
    placeholder="Date Time:"
    [(ngModel)]="date"
    [min]="min"
    [max]="max"
    [nxtDateTimeTrigger]="picker"
    [nxtDateTime]="picker">
<nxt-date-time #picker
    [startAt]="startAt"></nxt-date-time>
import { Component, ViewEncapsulation } from '@angular/core'
 
@Component({
    selector: 'app-min-max',
    templateUrl: './min-max.component.html',
    styleUrls: ['./min-max.component.css'],
    encapsulation: ViewEncapsulation.Emulated
})
export class MinMaxComponent {
    date?: Date
    min = new Date(2018, 3, 12, 10, 30)
    max = new Date(2018, 3, 25, 20, 30)
    startAt = new Date(2018, 3, 18, 10, 30)
}

Filter available dates

View on GitHub
<input class="form-control"
    placeholder="Date and time"
    [(ngModel)]="date"
    [dateTimeFilter]="filter"
    [nxtDateTimeTrigger]="picker"
    [nxtDateTime]="picker">
<nxt-date-time #picker></nxt-date-time>
import { Component, ViewEncapsulation } from '@angular/core'
 
@Component({
    selector: 'app-filter-restriction',
    templateUrl: './filter-restriction.component.html',
    styleUrls: ['./filter-restriction.component.css'],
    encapsulation: ViewEncapsulation.Emulated
})
export class FilterRestrictionComponent {
    date?: Date
    filter = (d?: Date) => {
        const day = d?.getDay()
        // Prevent Saturday and Sunday from being selected.
        return day !== 0 && day !== 6
    }
}