Free
Pro

Time Picker

The Ply time picker stores an HH:mm string and opens an overlay clock. Use 12-hour or 24-hour display. Copy it in with the CLI; pair with Pro datepicker showTime when the same field needs a calendar and a time.

When to use

  • Reminders, business hours, and duration starts that are time-only.
  • Forms that already store times as HH:mm strings.

When not to use

  • A full datetime in one control — use datepicker with showTime (Pro).
  • Relative times (“in 5 minutes”) — that is application logic, not this picker.

Install with npx ply-ui-cli add time-picker.

freenew

Playground

Playground

Hour cycle

HTML

<ply-time-picker
  [(ngModel)]="time"
  hourCycle="24"
  [disabled]="false">
</ply-time-picker>

24-hour

Value: 09:30

12-hour

Keyboard & accessibility

Role
The trigger is a combobox. The panel is a dialog-like list of hours and minutes.
Focus
Focus moves into the overlay when it opens and returns to the trigger on close.

Shortcuts

  • EnterOpen or confirm the overlay
  • ArrowUpIncrement the focused unit
  • ArrowDownDecrement the focused unit
  • EscClose without applying

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 time-picker

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 time-picker
// Paths are relative to aliases.components (default: src/app/components)
import { TimePickerComponent } from './time-picker/time-picker.component';

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

API for time-picker — generated from JSDoc in the library source.

API reference for time-picker
APIMemberTypeDefaultDescription
ply-time-pickerclassstring''Additional host classes.
ply-time-pickerlabelstring''Visible label above the field.
ply-time-pickerplaceholderunknown'Select time'Placeholder when no time is selected.
ply-time-pickerhourCycleTimePickerHourCycle'24'12-hour or 24-hour clock.
ply-time-pickerminuteStepnumber5Minute increment (1, 5, or 15).
ply-time-pickerinlinebooleanfalseInline panel instead of an overlay (used inside datepicker datetime mode).
ply-time-pickerdisabledbooleanfalseDisables the field. Also set by Angular Forms via `setDisabledState`.
ply-time-picker(timeChange)string — Emits `HH:mm` when the time changes.