Angular Date Time Picker

To customize the language and date/time formatting for the picker, use the following injection tokens:

• OWL_DATE_TIME_LOCALE: Defines the locale for different languages.
• OWL_DATE_TIME_FORMATS: Defines the specific date and time formats used by the picker.

The picker is implementation-agnostic. You must provide a module that matches your data type:

• Native JS Date: Use OwlNativeDateTimeModule.
• Unix Timestamp (milliseconds): Use OwlUnixTimestampDateTimeModule.
• DayJs: Install @danielmoncada/angular-datetime-picker-dayjs-adapter and use OwlDayJsDateTimeModule.
• MomentJs: Install @danielmoncada/angular-datetime-picker-moment-adapter and use OwlMomentDateTimeModule.

The picker requires @angular/cdk as a peer dependency to provide the overlay used for rendering.

Important: You must include the CDK overlay styles in your project. If you are not already using Angular Material, add the following to your styles:

@use '@angular/cdk/overlay-prebuilt.css';

Import OwlDateTimeModule and a date implementation module (like OwlNativeDateTimeModule) into your @NgModule to enable the picker functionality.

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

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

The picker uses CDK overlays. If you are not using Angular Material, you must manually include the CDK overlay styles and the picker styles. You can do this in your styles.scss or via the styles array in angular.json.

// In styles.scss
@use '@angular/cdk/overlay-prebuilt.css';
@use '@danielmoncada/angular-datetime-picker/assets/style/picker.min.css';

// In angular.json
"styles": [
    "node_modules/@angular/cdk/overlay-prebuilt.css",
    "node_modules/@danielmoncada/angular-datetime-picker/assets/style/picker.min.css",
    "src/styles.scss"
]

To use the Angular Date/Time Picker, install the package and its required peer dependency, @angular/cdk.

Note: The current version supports Angular 22. If you are using an older version of Angular, refer to the version compatibility mapping in the documentation to select the appropriate package version.

npm install @danielmoncada/angular-datetime-picker --save
npm install @angular/cdk --save

The OwlDateTimeComponent acts as a controller that must be associated with an input directive (OwlDateTimeInputDirective). The component manages the overlay (popup or dialog), while the directive (applied to an <input> element) handles the value binding and formatting.

Key constraints:

• An OwlDateTimeComponent can only be associated with a single input directive.
• The component's open() method requires an associated input to function.
• The component's selected and selecteds properties are synchronized with the input's value via the registerInput method.

The picker's behavior is governed by three primary type definitions:

• PickerType: Defines what the picker displays.

  • 'both': Displays both date and time.
  • 'calendar': Displays only the date.
  • 'timer': Displays only the time.

• PickerMode: Defines how the picker is presented in the UI.

  • 'popup': Opens in a popup overlay.
  • 'dialog': Opens in a modal dialog.
  • 'inline': Rendered directly within the layout.

• SelectMode: Defines how many values can be selected.

  • 'single': Single date/time selection.
  • 'range': A range of two dates.
  • 'rangeFrom': Selecting the start of a range.
  • 'rangeTo': Selecting the end of a range.

The owlDateTime directive is applied to an <input> element to integrate the date-time picker with Angular's Reactive or Template-driven forms. It implements ControlValueAccessor and Validator, allowing it to work seamlessly with ngModel or formControlName.

To use it, apply the owlDateTime attribute to your input and pass the associated OwlDateTimeComponent instance to it.

<input [owlDateTime="picker"] [(ngModel)]="myDate" />
<owl-date-time #picker></owl-date-time>

To use the picker, connect an <input> to an <owl-date-time> component using the [owlDateTime] directive. You can trigger the picker via the input itself or through a separate element (like a span or icon) using the [owlDateTimeTrigger] directive.

<!-- Trigger via the input itself -->
<input [owlDateTime="dt1"] [owlDateTimeTrigger="dt1"] placeholder="Date Time" /> 
<owl-date-time #dt1></owl-date-time>

<!-- Trigger via a separate element (e.g., an icon) -->
<input [owlDateTime="dt2"] placeholder="Date Time" />
<span [owlDateTimeTrigger="dt2"><i class="fa fa-calendar"></i></span>
<owl-date-time #dt2></owl-date-time>

You can provide a custom global scroll strategy for the date picker using the OWL_DTPICKER_SCROLL_STRATEGY injection token. This determines how the background scrolls when the picker overlay is open. By default, the library provides a factory that uses the Angular CDK BlockScrollStrategy to block scrolling.

import { OWL_DTPICKER_SCROLL_STRATEGY } from '@danielmoncada/angular-datetime-picker';

// In your @NgModule or Component providers:
providers: [
  {
    provide: OWL_DTPICKER_SCROLL_STRATEGY,
    useFactory: (overlay: Overlay) => () => overlay.scrollStrategies().block(),
    deps: [Overlay]
  }
]