@dintecom/ngx-datetime-picker

v22.0.1

Published

4 days ago

Angular Date Time Picker

0High
0Medium
0Low

gkofman

artem-dintecom

Angular datepicker date picker timepicker time picker datetime picker date time picker material ngx

:date: :clock1: Angular Date/Time Picker

The current version of this package supports Angular 22

If you need support for other Angular version, see Breaking Changes below.

Breaking Changes

Version 22.x.x is the official release for Angular 22 and it also supports Angular 21.
Version 21.x.x is the official release for Angular 21 and it also supports Angular 20.
Version 20.x.x is the official release for Angular 20 and it also supports Angular 19.
Version 19.x.x >= no longer supports ng 18. If you need ng 18 support, stick with version 18.x.x.
Version 18.x.x >= no longer supports ng 17. If you need ng 17 support, stick with version 17.x.x.
Version 17.x.x >= no longer supports ng 16 - 13. If you need ng 16-13 support, stick with version 16.x.x.
Version 14.x.x >= no longer supports < ng 13. If you need View Engine support, stick with version 13.x.x.
Version 13.1.0+ no longer supports the MomentJs time adapter natively. If you want to use the MomentJs adapter, see GitHub or npm.
If you need ng 8 support, please stick with: https://github.com/DanielYKPan/date-time-picker

Description

Simple Angular date time picker. Online doc is here, Online demos(StackBlitz) are here and here. This picker is responsive design, so feel free to try it in your desktops, tablets and mobile devices.

How to Use

Install with npm: npm install @dintecom/ngx-datetime-picker --save
Install @angular/cdk, which is a peer dependency and provides the overlay used by the picker: npm install @angular/cdk --save. If your app already uses Angular Material, the CDK is installed for you and this step (and the overlay styles below) is already covered.
Add styles. The picker renders its popup/dialog inside a CDK overlay, so you need both the picker styles and the CDK's prebuilt overlay styles. If you are not using Angular Material, add them once — either in your styles.scss:
```
@use '@angular/cdk/overlay-prebuilt.css';
@use '@dintecom/ngx-datetime-picker/assets/style/picker.min.css';
```
or via the styles array in angular.json:
```
"styles": [
    "node_modules/@angular/cdk/overlay-prebuilt.css",
    "node_modules/@dintecom/ngx-datetime-picker/assets/style/picker.min.css",
    "src/styles.scss"
]
```
(If you already import Angular Material's theme, the CDK overlay styles are included and you only need the picker styles.)
Configure animations (required) - see Animation section below for details.

Standalone App Configuration (Recommended)

Add provider functions to your application config in main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import {
  provideOwlDateTime,
  provideOwlNativeDateTime
} from '@dintecom/ngx-datetime-picker';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations(),
    provideOwlDateTime(),
    provideOwlNativeDateTime(),
    //...
  ]
});

Then in your component, import the picker components:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  OwlDateTimeComponent,
  OwlDateTimeTriggerDirective,
  OwlDateTimeInputDirective
} from '@dintecom/ngx-datetime-picker';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [
    FormsModule,
    OwlDateTimeComponent,
    OwlDateTimeTriggerDirective,
    OwlDateTimeInputDirective
  ],
  template: `
    <input
      [(ngModel)]="selectedDate"
      [owlDateTime]="dt1"
      [owlDateTimeTrigger]="dt1"
      placeholder="Date Time">
    <owl-date-time #dt1></owl-date-time>
  `
})
export class ExampleComponent {
  selectedDate = new Date();
}

NgModule Configuration (Legacy)

Add OwlDateTimeModule and OwlNativeDateTimeModule to your @NgModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MyTestApp } from './my-test-app';
import {
  OwlDateTimeModule,
  OwlNativeDateTimeModule
} from '@dintecom/ngx-datetime-picker';

@NgModule({
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      OwlDateTimeModule,
      OwlNativeDateTimeModule
    ],
    declarations: [MyTestApp],
    bootstrap: [MyTestApp],
})
export class MyTestAppModule {}

Basic Usage

Connecting a picker to an input and a trigger:

<input [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1" placeholder="Date Time" />
<owl-date-time #dt1></owl-date-time>

With a separate trigger button:

<input [owlDateTime]="dt2" placeholder="Date Time" />
<span [owlDateTimeTrigger]="dt2"><i class="fa fa-calendar"></i></span>
<owl-date-time #dt2></owl-date-time>

The examples above are quite basic. The picker has much more features, and you could learn more about those from demo page.

For Standalone Applications (Recommended)

In your main.ts or application config, use provideAnimations():

import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations(),
    //...
  ]
});

If you prefer to disable animation effects, use provideNoopAnimations() instead:

import { provideNoopAnimations } from '@angular/platform-browser/animations';

bootstrapApplication(AppComponent, {
  providers: [
    provideNoopAnimations(),
    //...
  ]
});

For NgModule-based Applications (Legacy)

Import BrowserAnimationsModule in your app module:

Zoneless Support

This library fully supports Angular's zoneless mode (experimental in Angular 18+). You can run your application without zone.js for improved performance and reduced bundle size.

Enabling Zoneless Mode

In your main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideExperimentalZonelessChangeDetection } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';
import {
  provideOwlDateTime,
  provideOwlNativeDateTime
} from '@dintecom/ngx-datetime-picker';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection(), // Enable zoneless mode
    provideAnimations(),
    provideOwlDateTime(),
    provideOwlNativeDateTime(),
    //...
  ]
});

Benefits of Zoneless Mode

Better Performance: Eliminates zone.js overhead and monkey-patching
Smaller Bundle Size: Removes zone.js dependency (~15KB)
Predictable Change Detection: Explicit control over when change detection runs
Modern Architecture: Aligns with Angular's future direction

The date-time picker will work seamlessly in both zoned and zoneless applications without any code changes.

Choose a date implementation

The date-time picker was built to be date implementation agnostic. Developers need to make sure to provide the appropriate pieces for the picker to work with their chosen implementation. There are two pre-made modules, users need to import one of them or build your own one (learn more about this from here).

OwlNativeDateTimeModule - support for native JavaScript Date object
OwlUnixTimestampDateTimeModule - support for milliseconds since Epoch (number)

Date/Time Adapter Extensions

https://day.js.org/

OwlDayJsDateTimeModule - support for DayJs
- You must install an optional adapater to use this. see here, npm

https://momentjs.com/

OwlMomentDateTimeModule - support for MomentJs
- You must install an optional adapater to use this. see here, npm

Properties for `owl-date-time`

Events for `owl-date-time`

Properties for `input[owlDateTime]`

Events for `input[owlDateTime]`

| Events | Parameter | Description | | :--------------- | :--------------------------------------------------------------------- | :--------------------------------------------------------------------------------- | | dateTimeChange | source: OwlDateTimeInput, value: input value, input: the input element | Callback to invoke when change event is fired on this <input [owlDateTime]> | | dateTimeInput | source: OwlDateTimeInput, value: input value, input: the input element | Callback to invoke when an input event is fired on this <input [owlDateTime]>. |

Properties for `[owlDateTimeTrigger]`

Properties for `[owlDateTimeTrigger]`

Properties for `owl-date-time-inline`

Localization and DateTime Format

Localization for different languages and formats is defined by OWL_DATE_TIME_LOCALE and OWL_DATE_TIME_FORMATS. You could learn more about this from here.

Dependencies

@angular/cdk (peer dependency) — provides the overlay the picker is rendered in. Remember to include the CDK overlay styles (@use '@angular/cdk/overlay-prebuilt.css';) unless you already use Angular Material. See How to Use.

Demo

Online doc is here
Online demos (StackBlitz) are here and here

License

License: MIT

Author

Maintained and updated by Daniel Moncada, original implementatiom by Daniel Pan

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

:date: :clock1: Angular Date/Time Picker

Breaking Changes

Description

How to Use

Standalone App Configuration (Recommended)

NgModule Configuration (Legacy)

Basic Usage

For Standalone Applications (Recommended)

For NgModule-based Applications (Legacy)

Zoneless Support

Enabling Zoneless Mode

Benefits of Zoneless Mode

Choose a date implementation

Date/Time Adapter Extensions

Properties for owl-date-time

Events for owl-date-time

Properties for input[owlDateTime]

Events for input[owlDateTime]

Properties for [owlDateTimeTrigger]

Properties for [owlDateTimeTrigger]

Properties for owl-date-time-inline

Localization and DateTime Format

Dependencies

Demo

License

Author

Properties for `owl-date-time`

Events for `owl-date-time`

Properties for `input[owlDateTime]`

Events for `input[owlDateTime]`

Properties for `[owlDateTimeTrigger]`

Properties for `[owlDateTimeTrigger]`

Properties for `owl-date-time-inline`