Angular

Try the live Angular demo for interactive picker and copy-paste snippets.

Support tier

Full support through Web Components. Call registerDateTimePickerElements() from universal-datetime-picker/angular and add CUSTOM_ELEMENTS_SCHEMA on the consuming component or module.

Install + deps

npm install universal-datetime-picker

Angular 15+ standalone or NgModule apps both work. React peers are optional.

Setup

Register elements once at startup in main.ts, import the stylesheet, and allow unknown tags with CUSTOM_ELEMENTS_SCHEMA.

Exact import path

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

registerDateTimePickerElements();

registerCalendarTimeElements still exists as a deprecated alias. Prefer registerDateTimePickerElements.

Minimal example

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

registerDateTimePickerElements();

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>
    <p>Selected: {{ date }}</p>
  `,
})
export class BookingComponent {
  date: Date | null = null;

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

Realistic example

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

@Component({
  selector: "app-schedule",
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <label for="when">When</label>
    <datetime-picker-input
      id="when"
      placeholder="Pick date & time"
      as-string="false"
      (change)="onChange($event.detail)"
      (openchange)="onOpenChange($event.detail)"
    ></datetime-picker-input>

    <datetime-picker-range
      inline
      as-string="false"
      (change)="onRange($event.detail)"
    ></datetime-picker-range>
  `,
})
export class ScheduleComponent {
  date: Date | null = null;
  open = false;
  range: { start: Date | null; end: Date | null } = {
    start: null,
    end: null,
  };

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

  onOpenChange(detail: unknown) {
    this.open = Boolean(detail);
  }

  onRange(detail: unknown) {
    this.range = detail as { start: Date | null; end: Date | null };
  }
}

Configuration notes

Without CUSTOM_ELEMENTS_SCHEMA, Angular rejects datetime-picker* tags at compile time.
Template bindings use (change) and (openchange). Read values from $event.detail.
Attributes stay kebab-case in the template: as-string, show-seconds.
NgModule apps can add CUSTOM_ELEMENTS_SCHEMA on the module instead of each component.

Events

(change): selected value in $event.detail
(openchange): open boolean in $event.detail

Customization links

Pitfalls

Missing schema yields template errors for unknown elements.
Registering after the first template render can leave the first paint inert. Call registration before bootstrap completes.
Do not import the React main entry unless you intentionally embed React in Angular.

Troubleshooting

Schema and registration mistakes are covered in Troubleshooting.