Getting started with nxt-pick-datetime

Installing

npm install --save nxt-pick-datetime

Import main module and DateTime adapter provider

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

NativeDateTimeModule - support for native JavaScript Date object
MomentDateTimeModule - support for MomentJs

import { DateTimeModule } from 'nxt-pick-datetime'
import { NativeDateTimeModule } from 'nxt-pick-datetime/native-adapter'

@NgModule({
    ...
    imports: [
        ...
        DateTimeModule,
        NativeDateTimeModule
    ]
})

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
[startView]	ViewType	`'month'`	The view that the calendar should start on
[stepHour]	number	`1`	Hours to change per step
[stepMinute]	number	`1`	Minutes to change per step
[backdropClass]	string \| string[]	`undefined`	Custom class for the picker backdrop
[stepSecond]	number	`1`	Seconds to change per step
[panelClass]	string \| string[]	`undefined`	Custom class for the picker overlay pane
[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
[startAt]	T	`undefined`	The date to show when picker opens Defaults to selected date (if available) or current date.
[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	`false`	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

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`

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>`.

[nxtDateTimeTrigger]

Input	Type	Default value	Description
[nxtDateTimeTrigger]	DateTimeComponent<T>	`undefined`
[disabled]	boolean	`false`

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
[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]	number	`1`	Hours to change per step
[stepMinute]	number	`1`	Minutes to change per step
[disabled]	boolean	`false`	Whether the date time picker should be disabled
[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
[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]	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
[value]	T	`undefined`
[values]	Array<T>	`undefined`

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.