An Angular date range that stores the time too

<ply-date-range-picker
  showTime
  hourCycle="24"
  label="Reservation"
  [(ngModel)]="stay">
</ply-date-range-picker>

Ply — ply-ui.com binds a reservation as two JavaScript Dates, not a pair of text fields. Set showTime on ply-date-range-picker and the same popup asks for the start day, the end day, then a time for each. One datetime uses ply-datepicker with showTime. Time of day only uses the free ply-time-picker. The field at the top of this page is that control.

Switch the three modes, flip 12-hour and 24-hour, and apply a range. The readout and the snippet update together. The full catalog demo, including the date-only range, is at /base-elements/datepicker/.

---

Why one native input is not the reservation form

input type="datetime-local" has been widely available since October 2021. MDN still warns that "The control's UI varies in general from browser to browser," and the value is a local date and time with no time zone. A stay needs two of those values, in an order, with the same clock. Two native inputs leave the pairing, the swap, and the popup to you.

Angular template-driven forms bind that pair with ngModel. The copied template is ordinary Tailwind CSS, so the field matches the rest of the app after npx ply-ui-cli add.

---

Which field to use

hourCycle is "24" or "12" on all three popup fields. The toggle above the demo writes that attribute into the snippet.

An inline month belongs on ply-calendar. A reminder that is only a clock belongs on ply-time-picker.

---

What happens inside the popup

showTime keeps the calendar and the clocks in one dropdown.

1. Pick the start day, then the end day. Choose times stays disabled until both days are set.
2. The panel switches to a start clock and an end clock. Change dates goes back.
3. Apply writes both datetimes and closes the popup.

If the end is earlier than the start — including a same-day stay whose end clock is before the start clock — Apply swaps them so the start stays first. Reopening the field restores the dates and the times you applied.

The popup is a calendar grid, not a dialog. Arrow keys move the focused day. Escape closes and returns focus to the field. That is the WAI-ARIA grid pattern used by the datepicker page, not a claim that the whole catalog is WCAG compliant. Notes for the live demo sit on /base-elements/datepicker/.

The overlay skips DOM work on the server, so the article and the demo page can prerender. The same pattern is covered in the SSR write-up.

---

Copy it in

date-range-picker and datepicker are Pro. The license is checked when the CLI downloads them. time-picker and calendar are free.

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

<ply-date-range-picker
  showTime
  hourCycle="24"
  label="Reservation"
  [(ngModel)]="stay">
</ply-date-range-picker>

stay is { start: Date | null; end: Date | null }. Format it with Angular's DatePipe and the short format when the readout should include the time. The files land in your repo. Edits after that are yours — the longer version of that boundary is The component lives in your repo.