Skip to content
Pelatform UI

Data inputExtension

Date & Time Picker

Choose a date and a time in one field, from a popup with a calendar and time columns, or type DD/MM/YYYY HH:MM.

Class nameTypeDescription
date-pickerplf:date-pickerComponentWraps the native input and the controls
calendarplf:calendarComponentThe Calendar in the panel
input-groupplf:input-groupComponentThe text field with its trigger
date-picker-controlsplf:date-picker-controlsPartThe hidden controls the script shows
date-picker-fieldplf:date-picker-fieldPartThe text field's Field
date-picker-panelplf:date-picker-panelPartThe Popover panel
date-time-picker-panelplf:date-time-picker-panelPartWidens the panel for the time columns
date-time-picker-bodyplf:date-time-picker-bodyPartThe calendar beside the time columns
date-time-picker-timeplf:date-time-picker-timePartThe time columns' box the script adds, or an empty one the page places
date-picker-footerplf:date-picker-footerPartThe panel's buttons
input-group-actionplf:input-group-actionPartThe button that opens the panel, which draws a calendar
input-group-addonplf:input-group-addonPartJoins the button as a segment
input-group-iconplf:input-group-iconPartYour own SVG, in place of the drawn calendar; an icon class there doesn't need it
input-group-controlplf:input-group-controlPartThe text field

Default

The native input needs a unique id and a name; the text field has no name and needs a label.

Any minute, in your local time. Bookings open from 5 October 2026, 08:00.

Seconds

The time columns follow the native step in seconds: 900 shows quarter hours, and a step below 60 adds a Second column.

JavaScript

Date & Time Picker needs JavaScript and is an extension: the Full script and Full CSS leave it out. The Full script (pelatform-ui.min.js) and the extension scripts after it start every component on page load, with no code of your own; with Core and single files, the last line starts them. For markup you add later, see Dynamic content.

<link rel="stylesheet" href="pelatform-ui.min.css">
<link rel="stylesheet" href="extensions/calendar.min.css">
<link rel="stylesheet" href="extensions/date-picker.min.css">
<link rel="stylesheet" href="extensions/date-time-picker.min.css">
<script src="pelatform-ui.min.js" defer></script>
<script src="extensions/calendar.min.js" defer></script>
<script src="extensions/date-time-picker.min.js" defer></script>
<link rel="stylesheet" href="pelatform-ui.prefixed.min.css">
<link rel="stylesheet" href="extensions/calendar.prefixed.min.css">
<link rel="stylesheet" href="extensions/date-picker.prefixed.min.css">
<link rel="stylesheet" href="extensions/date-time-picker.prefixed.min.css">
<script src="pelatform-ui.min.js" defer></script>
<script src="extensions/calendar.min.js" defer></script>
<script src="extensions/date-time-picker.min.js" defer></script>

With ESM imports, import DateTimePicker from @pelatform/ui/extensions/date-time-picker and call use(DateTimePicker) before init().

Hooks

Attribute Purpose
data-plf-date-time-picker The date-picker wrapper
<input type="datetime-local"> The named native input, which keeps the value and works without the script; its field, the wrapper’s child around it, hides once the text field works
data-plf-popover Holds the field, its first child, and the panel, written hidden. The field holds the calendar button, the Popover’s trigger, and the text field: an unnamed, labeled text input, beside the button in one group such as an Input Group. Unless written, the script gives it the placeholder DD/MM/YYYY HH:MM, with :SS for seconds, and no autofill
data-plf-date-time-picker-time Optional; on an empty date-time-picker-time, places the time columns there instead of after the calendar
data-plf-hour-label, data-plf-minute-label, data-plf-second-label On the wrapper: translated column headings; Hour, Minute and Second by default
data-plf-date-time-picker-clear, data-plf-date-time-picker-apply Optional <button type="button"> in the panel: empty the value, or commit the draft
min, max, required, readonly, disabled On the native input: apply to the whole picker

Methods

Method Behavior
PLF.DateTimePicker.getOrCreateInstance(element) Returns the instance, creating it for valid markup
PLF.DateTimePicker.getInstance(element) Returns the instance or null
instance.getState() Returns {value, draft, open}
instance.setValue(value) Sets a YYYY-MM-DDTHH:MM value, or null to clear; returns false when unchanged, out of bounds or canceled
instance.clear() Empties the value
instance.open(), instance.close() Open or close the popup; return false when nothing changes
instance.destroy() Removes the time columns and error, restores the native field, and leaves Calendar and Popover instances it did not create

Events

Event When
plf:date-time-picker:before-change Before a new value; cancelable
plf:date-time-picker:change After the new value is kept

Each event’s detail:

Property Value
instance The Date & Time Picker instance
reason trigger or api
trigger The control that set the value, such as the text field, a time option, the clear button or the apply button, or null from a method
previousValue The value before, YYYY-MM-DDTHH:MM with :SS for seconds, or null when empty
value The new value, YYYY-MM-DDTHH:MM with :SS for seconds, or null when empty

The native input also fires input and change.

Keyboard

Key Action
Alt + Arrow Down In the field, opens the popup with focus on the calendar
Enter In the field, applies the typed value; in a time column, chooses the option
Escape In the field, restores the current text; in the popup, closes it without changing the value
Arrow Up, Arrow Down, Home, End Move through the enabled options of a time column
Space In a time column, chooses the option

Calendar days use the Calendar keys.

CSS variables

Variable Default
--plf-date-time-picker-width 31rem (496px), or 35rem (560px) with a Second column; never wider than the viewport
--plf-date-time-picker-column-height 6.5rem (104px), the compact time wheel on narrow screens
--plf-date-time-picker-hover-bg --plf-color-surface-muted
--plf-date-time-picker-selected-bg --plf-color-primary
--plf-date-time-picker-selected-color --plf-color-on-primary

Built with Pelatform UIv0.1.0

Components

Getting started

Foundations

Components

Actions

Data display

Navigation

Feedback

Data input

Layout

Advanced

Integrations

Blocks

Application

Authentication

Icons