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

Input	Type	Default value	Description
[showSecondsTimer]	boolean	`false`	When true, shows a timer to configure the seconds value
[hour12Timer]	boolean	`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]	number	`1`	Hours to change per step
[startAt]	T \| undefined		The date to show when picker opens Defaults to selected date (if available) or current date.
[stepMinute]	number	`1`	Minutes to change per step
[stepSecond]	number	`1`	Seconds to change per step
[firstDayOfWeek]	number	`0`	Set the first day of week Valid values are from 0 [Sunday] to 6 [Saturday]
[hideOtherMonths]	boolean	`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]	boolean \| undefined		Whether the date time picker should be disabled
[isOpen]	boolean	`false`	Whether the calendar is open
[scrollStrategy]	ScrollStrategy	`BlockScrollStrategy`	The scroll strategy when the picker is open (see CDK documentation)

Output	Type	Description
(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
(confirmSelectedChange)	Array<T \| undefined> \| T	Emit when the selected value has been confirmed
(disabledChange)	boolean	Emits when the date time picker is disabled

input[nxtDateTime]

Input	Type	Default value	Description
[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]	boolean	`false`	Whether the date & time picker input is disabled
[min]	T \| undefined		The minimum valid date
[max]	T \| undefined		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]	string	`'~'`	The character to separate the 'from' and 'to' in input value
[value]	T \| undefined
[values]	Array<T \| undefined>	`new Array<T \| undefined>()`

Output	Type	Description
(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>`.
(valueChange)	Array<T \| undefined> \| T \| undefined	Emits when the value changes (either due to user input or programmatic change)
(disabledChange)	boolean	Emits when the disabled state has changed

[nxtDateTimeTrigger]

Input	Type	Default value	Description
[nxtDateTimeTrigger]	DateTimeComponent<T> \| undefined
[disabled]	boolean \| undefined

nxt-date-time-inline

Input	Type	Default value	Description
[showSecondsTimer]	boolean	`false`	When true, shows a timer to configure the seconds value
[hour12Timer]	boolean	`false`	When true, the timer will be in 12-hour format mode
[pickerType]	PickerType	`'both'`	Set the type of the dateTime picker `'both'` - show both calendar and timer `'calendar'` - show only calendar `'timer'` - show only timer
[startView]	ViewType	`'month'`	The view that the calendar should start on
[disabled]	boolean	`false`	Whether the date time picker should be disabled
[stepHour]	number	`1`	Hours to change per step
[stepMinute]	number	`1`	Minutes to change per step
[stepSecond]	number	`1`	Seconds to change per step
[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
[value]	T \| undefined
[firstDayOfWeek]	number	`0`	Set the first day of week Valid values are from 0 [Sunday] to 6 [Saturday]
[hideOtherMonths]	boolean	`false`	If true, don't show dates from preious / next month on the calendar month view
[values]	Array<T \| undefined> \| undefined
[startAt]	T \| undefined		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]	T \| undefined		The minimum valid date
[max]	T \| undefined		The maximum valid date

Output	Type	Description
(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.