# nxt-pick-datetime

> Date time picker for Angular

Latest version **22.0.0** (published 2026-07-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install nxt-pick-datetime
pnpm add nxt-pick-datetime
yarn add nxt-pick-datetime
bun add nxt-pick-datetime
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 22.0.0 |
| Published | 2026-07-13 |
| First published | 2020-01-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 765.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 26 |
| Maintainers | hitko |
| Keywords | nxt-pick-datetime, ng-pick-datetime, angular-pick-datetime, pick datetime, pick date time, angular, datetime, date, time, picker |

## Links

- npm: https://www.npmjs.com/package/nxt-pick-datetime
- Repository: https://github.com/Liquid-JS/nxt-components
- Homepage: https://github.com/Liquid-JS/nxt-components/tree/master/packages/pick-datetime
- Issues: https://github.com/Liquid-JS/nxt-components/issues
- npm.io page: https://npm.io/package/nxt-pick-datetime

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 22.0.0 (latest) — 2026-07-13
- 22.0.0-alpha.0 (prerelease) — 2026-07-10
- 21.0.0 — 2026-01-16
- 21.0.0-alpha.0 — 2026-01-10
- 20.0.0 — 2025-06-30
- 19.0.4 — 2025-01-10
- 19.0.0 — 2024-12-02
- 18.0.0 — 2024-06-03
- 17.0.1 — 2023-12-13
- 17.0.0 — 2023-11-09
- 16.2.0 — 2023-08-24
- 16.1.0 — 2023-06-19
- 16.0.0 — 2023-05-04
- 16.0.0-alpha.8 — 2023-05-04
- 16.0.0-alpha.6 — 2023-03-24
- … 16 more at https://npm.io/package/nxt-pick-datetime/versions

## README

# Angular date & time picker

[![GitHub license](https://img.shields.io/github/license/Liquid-JS/nxt-components.svg)](https://github.com/Liquid-JS/nxt-components/blob/master/LICENSE)
[![npm](https://img.shields.io/npm/dm/nxt-pick-datetime.svg)](https://www.npmjs.com/package/nxt-pick-datetime)
[![scope](https://img.shields.io/npm/v/nxt-pick-datetime.svg)](https://www.npmjs.com/package/nxt-pick-datetime)

Simple responsive Angular date and time picker.

## Quick links

-   [Demo](https://liquid-js.github.io/nxt-components/demo/pick-datetime)
-   [Getting started](https://liquid-js.github.io/nxt-components/demo/pick-datetime/getting-started)
-   [Accessibility](https://liquid-js.github.io/nxt-components/demo/pick-datetime/accessibility)
-   [Validation](https://liquid-js.github.io/nxt-components/demo/pick-datetime/validation)
-   [Custom date adapter](https://liquid-js.github.io/nxt-components/demo/pick-datetime/custom-adapter)
-   [API docs](https://liquid-js.github.io/nxt-components/nxt-pick-datetime)

### Installing

```sh
npm install --save nxt-pick-datetime
npm install --save moment   # if you want to use MomentDateTimeModule
```

### 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](https://liquid-js.github.io/nxt-components/demo/pick-datetime/custom-adapter)).

-   `provideNativeDateTimeAdapter` - support for native JavaScript Date object
-   `provideNativeDateTimeAdapter` - support for MomentJs

```ts
import { ApplicationConfig } from '@angular/core'
import { provideNativeDateTimeAdapter } from 'nxt-pick-datetime/native-adapter'

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

### Use it in a template

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

---
_Source: https://npm.io/package/nxt-pick-datetime · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._