npm install universal-datetime-picker

Angular date time picker

Angular integrates via registerDateTimePickerElements() in main.ts and CUSTOM_ELEMENTS_SCHEMA on standalone components or NgModules. Templates use familiar (change) bindings; event.detail carries the selected value. This page’s demo runs the same elements your Angular app renders.

CUSTOM_ELEMENTS_SCHEMA + registerDateTimePickerElements().

Try the live demo

npm install universal-datetime-picker

Live demo

Inline date · Date object

null

Popover datetime input

null

Date range

null → null

main.ts / AppModule

import { registerDateTimePickerElements } from "universal-datetime-picker/angular";
import "universal-datetime-picker/style.css";

registerDateTimePickerElements();

Standalone component

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

@Component({
  selector: "app-booking",
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <datetime-picker
      inline
      mode="date"
      as-string="false"
      (change)="onChange($event.detail)"
    ></datetime-picker>
  `,
})
export class BookingComponent {
  date: Date | null = null;

  onChange(detail: unknown) {
    this.date = detail instanceof Date ? detail : null;
  }
}

Notes

The live demo on this page uses the same custom elements your Angular app renders.
Add CUSTOM_ELEMENTS_SCHEMA (or define elements in a module) so Angular accepts the tags.

Documentation

Guides for this stack and the shared API.