nxt-components logo nxt-components
Github

Getting started with nxt-pick-datetime

Installing

npm install --save nxt-pick-datetime

Configure DateTime adapter provider

The date & time picker was built to be date implementation agnostic. It comes with two date adapter implementations, or you can provide your own adapter by implementing DateTimeAdapter (see documentation).

  • provideNativeDateTimeAdapter - support for native JavaScript Date object
  • provideMomentDateTimeAdapter - support for MomentJs
import { ApplicationConfig } from '@angular/core'
import { provideNativeDateTimeAdapter } from 'nxt-pick-datetime/native-adapter'

export const appConfig: ApplicationConfig = {
    providers: [
        provideNativeDateTimeAdapter()
    ]
}

Use it in a template

<input [nxtDateTime]="picker"
    [nxtDateTimeTrigger]="picker"
    placeholder="Date and time">
<nxt-date-time #picker></nxt-date-time>

Configuration options

nxt-date-time

InputTypeDefault valueDescription
[showSecondsTimer]false

When true, shows a timer to configure the seconds value

[hour12Timer]false

When true, the timer will be in 12-hour format mode

[backdropClass]string | string[]undefined

Custom class for the picker backdrop

[startView]ViewType'month'

The view that the calendar should start on

[panelClass]string | string[]undefined

Custom class for the picker overlay pane

[stepHour]1

Hours to change per step

[startAt]Tundefined

The date to show when picker opens

Defaults to selected date (if available) or current date.

[stepMinute]1

Minutes to change per step

[stepSecond]1

Seconds to change per step

[firstDayOfWeek]0

Set the first day of week

Valid values are from 0 [Sunday] to 6 [Saturday]

[hideOtherMonths]false

If true, don't show dates from preious / next month on the calendar month view

[pickerType]PickerType'both'

Set the type of the dateTime picker

  • 'both' - show both calendar and timer
  • 'calendar' - show only calendar
  • 'timer' - show only timer
[pickerMode]PickerMode'popup'

The style the picker would open as

  • 'popup' - display picker attached to the trigger element
  • 'dialog' - display picker as a dialog
[disabled]booleanfalse

Whether the date time picker should be disabled

[isOpen]booleanfalse

Whether the calendar is open

[scrollStrategy]ScrollStrategyBlockScrollStrategy

The scroll strategy when the picker is open (see CDK documentation)

OutputTypeDescription
(open)void

Callback when the picker is opened

(close)void

Callback when the picker is closed

(yearSelected)T

Emits selected year in multi-year view

This doesn't imply a change on the selected date.

(monthSelected)T

Emits selected month in year view

This doesn't imply a change on the selected date.

(isOpenChange)boolean

Emits when picker open state changes


input[nxtDateTime]

InputTypeDefault valueDescription
[nxtDateTime]DateTimeComponent<T>undefined

The date & time picker this input is associated with

[dateTimeFilter]DateFilter<T>undefined

A function to filter available date & time

[disabled]booleanfalse

Whether the date & time picker input is disabled

[min]Tundefined

The minimum valid date

[max]Tundefined

The maximum valid date

[selectMode]SelectMode'single'

The picker select mode

  • 'single' - select a single date
  • 'range' - select a range [from, to]
  • 'rangeFrom' - an open range with a fixed start date
  • 'rangeTo' - an open range with a fixed end date
[rangeSeparator]'~'

The character to separate the 'from' and 'to' in input value

[value]Tundefined
[values]Array<T>undefined
OutputTypeDescription
(dateTimeChange)DateTimeInputEvent<T>

Callback to invoke when change event is fired on this <input>

(dateTimeInput)DateTimeInputEvent<T>

Callback to invoke when an input event is fired on this <input>.


[nxtDateTimeTrigger]

InputTypeDefault valueDescription
[dtPicker]DateTimeComponent<T>undefined, { alias: 'nxtDateTimeTrigger' }
[disabled]booleanfalse

nxt-date-time-inline

InputTypeDefault valueDescription
[showSecondsTimer]false

When true, shows a timer to configure the seconds value

[hour12Timer]false

When true, the timer will be in 12-hour format mode

[startView]ViewType'month'

The view that the calendar should start on

[pickerType]PickerType'both'

Set the type of the dateTime picker

  • 'both' - show both calendar and timer
  • 'calendar' - show only calendar
  • 'timer' - show only timer
[stepHour]1

Hours to change per step

[stepMinute]1

Minutes to change per step

[stepSecond]1

Seconds to change per step

[disabled]booleanfalse

Whether the date time picker should be disabled

[firstDayOfWeek]0

Set the first day of week

Valid values are from 0 [Sunday] to 6 [Saturday]

[hideOtherMonths]false

If true, don't show dates from preious / next month on the calendar month view

[selectMode]SelectMode'single'

The picker select mode

  • 'single' - select a single date
  • 'range' - select a range [from, to]
  • 'rangeFrom' - an open range with a fixed start date
  • 'rangeTo' - an open range with a fixed end date
[startAt]Tundefined

The date to show when picker opens

Defaults to selected date (if available) or current date.

[dateTimeFilter]DateFilter<T>undefined

A function to filter available date & time

[min]Tundefined

The minimum valid date

[max]Tundefined

The maximum valid date

[value]Tundefined
[values]Array<T>undefined
OutputTypeDescription
(yearSelected)T

Emits selected year in multi-year view

This doesn't imply a change on the selected date.

(monthSelected)T

Emits selected month in year view

This doesn't imply a change on the selected date.