Datepicker

Ply datepicker (Pro) is an input that opens a calendar overlay. Bind a Date with ngModel. showTime adds a clock step in the same popup. The trigger uses aria-haspopup="grid" because the popup is a month grid, not a dialog. date-range-picker is the start/end sibling.

When to use

Forms that need a compact date field instead of an always-visible month.
Datetime in one control — set showTime (and hourCycle) on datepicker.

When not to use

An inline month that should stay on the page — use calendar (free).
Time of day only — use time-picker.

Install with npx ply-ui-cli add datepicker.

Pro

Pro — licensed

Datepicker — part of Ply Pro

Unlock it plus 90 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.

Unlock Pro

For an inline month grid without an input, use calendar. For time only, use time-picker.

Date field

An input that opens a calendar overlay. The popup is a grid, so the trigger uses aria-haspopup="grid".

Shipment Date

Current Value: None

HTML

<ply-datepicker
  label="Shipment Date"
  placeholder="Choose a date..."
  [(ngModel)]="pickerDate">
</ply-datepicker>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add datepicker
// Paths are relative to aliases.components (default: src/app/components)
import { DatepickerOverlayComponent } from './datepicker/datepicker-overlay.component';
import { DatepickerComponent } from './datepicker/datepicker.component';

@Component({
  selector: 'app-datepicker-example',
  imports: [
    DatepickerComponent,
    DatepickerOverlayComponent
  ],
  template: `...`
})
export class DatepickerExampleComponent {}

Install

bash

npx ply-ui-cli add datepicker

Date and time

Set showTime for a two-step flow: pick a date, choose a time, then apply — binding a full Date with hours and minutes.

Kickoff

Playground

Hour cycle

HTML

<ply-datepicker
  showTime
  hourCycle="24"
  [(ngModel)]="when">
</ply-datepicker>

Date range picker

An input-based range picker for start and end dates. Install date-range-picker (Pro).

Stay Duration

Selected: ... → ...

HTML

<ply-date-range-picker
  label="Stay Duration"
  placeholder="Select your stay..."
  [(ngModel)]="pickerRange">
</ply-date-range-picker>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add date-range-picker
// Paths are relative to aliases.components (default: src/app/components)
import { DateRange, DateRangePickerComponent } from './date-range-picker/date-range-picker.component';

@Component({
  selector: 'app-date-range-picker-example',
  imports: [
    DateRangePickerComponent
  ],
  template: `...`
})
export class DateRangePickerExampleComponent {}

Install

bash

npx ply-ui-cli add date-range-picker

Keyboard & accessibility

Role: Combobox that opens a calendar grid. The popup is not a dialog.
Focus: Focus moves into the grid when the overlay opens and returns to the field on close.

Shortcuts

EnterSpaceOpen the calendar grid
Arrow keysMove the focused day
EnterSelect the focused day
EscClose the overlay

Site-wide VPAT-style notes live on the accessibility report.

Installation

Run the following command to add this component to your project:

bash

npx ply-ui-cli add datepicker

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-ui-cli add datepicker
// Paths are relative to aliases.components (default: src/app/components)
import { DatepickerOverlayComponent } from './datepicker/datepicker-overlay.component';
import { DatepickerComponent } from './datepicker/datepicker.component';

@Component({
  selector: 'app-your-component',
  imports: [
    DatepickerComponent,
    DatepickerOverlayComponent
  ],
  template: `...`
})
export class YourComponent {}

API for datepicker — generated from JSDoc in the library source.

API reference for datepicker
API	Member	Type	Default	Description
`ply-datepicker`	`placeholder`	`unknown`	`'Select date'`	The placeholder text shown when no date is selected.
`ply-datepicker`	`label`	`string`	`''`	An optional label text displayed above the input.
`ply-datepicker`	`disabled`	`boolean`	`false`	Whether the control is disabled (consumer-facing input).
`ply-datepicker`	`showTime`	`boolean`	`false`	Two-step date + time flow: pick a date, then choose a time in the same dropdown. The field binds a full datetime.
`ply-datepicker`	`hourCycle`	`TimePickerHourCycle`	`'24'`	Clock cycle used when `showTime` is true.
`ply-datepicker-overlay`	`panelId`	`string`	`''`	Calendar panel id for aria-controls.
`ply-datepicker-overlay`	`showTime`	`boolean`	`false`	Shows the two-step date + time flow.
`ply-datepicker-overlay`	`hourCycle`	`TimePickerHourCycle`	`'24'`	Clock cycle forwarded to the time picker.
`ply-datepicker-overlay`	`(applied)`	`Date`	—	Emits when applied occurs.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 217 components and blocks (127 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).