Data input
Time Picker
The native time field styled as an Input, with steady digits, a clear active segment and an optional click-to-open picker.
| Class name | Type | Description |
|---|---|---|
inputplf:input | Component | A native time input |
fieldplf:field | Component | A label, the input and its messages |
field-labelplf:field-label | Part | The input's label |
field-requiredplf:field-required | Part | Marks a required field in the label |
field-helpplf:field-help | Part | Help text |
field-errorplf:field-error | Part | An error message |
input-smplf:input-sm | Size | Small |
input-lgplf:input-lg | Size | Large |
Default
The value is always submitted as 24-hour HH:MM, whatever the display.
Always submitted as 24-hour HH:MM.
<div class="field">
<label class="field-label" for="time-meeting">Meeting time</label>
<input class="input" id="time-meeting" name="meeting" type="time" data-plf-time-picker value="09:30" aria-describedby="time-meeting-help">
<p class="field-help" id="time-meeting-help">Always submitted as 24-hour HH:MM.</p>
</div><div class="plf:field">
<label class="plf:field-label" for="time-meeting">Meeting time</label>
<input class="plf:input" id="time-meeting" name="meeting" type="time" data-plf-time-picker value="09:30" aria-describedby="time-meeting-help">
<p class="plf:field-help" id="time-meeting-help">Always submitted as 24-hour HH:MM.</p>
</div>import { Field, TimePicker } from '@pelatform/react';
export function Example() {
return (
<Field label="Meeting time" help="Always submitted as 24-hour HH:MM.">
<TimePicker name="meeting" defaultValue="09:30" />
</Field>
);
}import { Field, TimePicker } from '@pelatform/react/prefixed';
export function Example() {
return (
<Field label="Meeting time" help="Always submitted as 24-hour HH:MM.">
<TimePicker name="meeting" defaultValue="09:30" />
</Field>
);
}Bounds and steps
Write min, max and value as HH:MM, and step in seconds.
Between 08:00 and 18:00, in 15-minute steps.
A step below 60 seconds adds a seconds segment.
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="field">
<label class="field-label" for="time-office">Office visit <span class="field-required">(required)</span></label>
<input class="input" id="time-office" name="visit" type="time" data-plf-time-picker min="08:00" max="18:00" step="900" required aria-describedby="time-office-help">
<p class="field-help" id="time-office-help">Between 08:00 and 18:00, in 15-minute steps.</p>
</div>
<div class="field">
<label class="field-label" for="time-seconds">Lap time</label>
<input class="input" id="time-seconds" name="lap" type="time" data-plf-time-picker step="1" value="14:05:30" aria-describedby="time-seconds-help">
<p class="field-help" id="time-seconds-help">A step below 60 seconds adds a seconds segment.</p>
</div>
</div><div class="plf:grid plf:grid-cols-1 plf:md:grid-cols-2 plf:gap-4">
<div class="plf:field">
<label class="plf:field-label" for="time-office">Office visit <span class="plf:field-required">(required)</span></label>
<input class="plf:input" id="time-office" name="visit" type="time" data-plf-time-picker min="08:00" max="18:00" step="900" required aria-describedby="time-office-help">
<p class="plf:field-help" id="time-office-help">Between 08:00 and 18:00, in 15-minute steps.</p>
</div>
<div class="plf:field">
<label class="plf:field-label" for="time-seconds">Lap time</label>
<input class="plf:input" id="time-seconds" name="lap" type="time" data-plf-time-picker step="1" value="14:05:30" aria-describedby="time-seconds-help">
<p class="plf:field-help" id="time-seconds-help">A step below 60 seconds adds a seconds segment.</p>
</div>
</div>import { Field, TimePicker } from '@pelatform/react';
export function Example() {
return (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Field label="Office visit" required help="Between 08:00 and 18:00, in 15-minute steps.">
<TimePicker name="visit" min="08:00" max="18:00" step={900} />
</Field>
<Field label="Lap time" help="A step below 60 seconds adds a seconds segment.">
<TimePicker name="lap" step={1} defaultValue="14:05:30" />
</Field>
</div>
);
}import { Field, TimePicker } from '@pelatform/react/prefixed';
export function Example() {
return (
<div className="plf:grid plf:grid-cols-1 plf:md:grid-cols-2 plf:gap-4">
<Field label="Office visit" required help="Between 08:00 and 18:00, in 15-minute steps.">
<TimePicker name="visit" min="08:00" max="18:00" step={900} />
</Field>
<Field label="Lap time" help="A step below 60 seconds adds a seconds segment.">
<TimePicker name="lap" step={1} defaultValue="14:05:30" />
</Field>
</div>
);
}States and direction
In dir="rtl" the label and help follow the direction, but the browser keeps its own segment order.
Choose a time after 08:00.
Set by the venue.
Unavailable for this booking.
يتبع الحقل اتجاه القراءة.
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="field">
<label class="field-label" for="time-invalid">Pickup time</label>
<input class="input" id="time-invalid" type="time" data-plf-time-picker value="07:00" aria-invalid="true" aria-describedby="time-invalid-error">
<p class="field-error" id="time-invalid-error">Choose a time after 08:00.</p>
</div>
<div class="field">
<label class="field-label" for="time-readonly">Check-in</label>
<input class="input" id="time-readonly" type="time" data-plf-time-picker value="15:00" readonly aria-describedby="time-readonly-help">
<p class="field-help" id="time-readonly-help">Set by the venue.</p>
</div>
<div class="field">
<label class="field-label" for="time-disabled">Check-out</label>
<input class="input" id="time-disabled" type="time" data-plf-time-picker value="11:00" disabled aria-describedby="time-disabled-help">
<p class="field-help" id="time-disabled-help">Unavailable for this booking.</p>
</div>
<div class="field" dir="rtl" lang="ar">
<label class="field-label" for="time-rtl">وقت الاجتماع</label>
<input class="input" id="time-rtl" type="time" data-plf-time-picker value="16:15" aria-describedby="time-rtl-help">
<p class="field-help" id="time-rtl-help">يتبع الحقل اتجاه القراءة.</p>
</div>
</div><div class="plf:grid plf:grid-cols-1 plf:md:grid-cols-2 plf:lg:grid-cols-4 plf:gap-4">
<div class="plf:field">
<label class="plf:field-label" for="time-invalid">Pickup time</label>
<input class="plf:input" id="time-invalid" type="time" data-plf-time-picker value="07:00" aria-invalid="true" aria-describedby="time-invalid-error">
<p class="plf:field-error" id="time-invalid-error">Choose a time after 08:00.</p>
</div>
<div class="plf:field">
<label class="plf:field-label" for="time-readonly">Check-in</label>
<input class="plf:input" id="time-readonly" type="time" data-plf-time-picker value="15:00" readonly aria-describedby="time-readonly-help">
<p class="plf:field-help" id="time-readonly-help">Set by the venue.</p>
</div>
<div class="plf:field">
<label class="plf:field-label" for="time-disabled">Check-out</label>
<input class="plf:input" id="time-disabled" type="time" data-plf-time-picker value="11:00" disabled aria-describedby="time-disabled-help">
<p class="plf:field-help" id="time-disabled-help">Unavailable for this booking.</p>
</div>
<div class="plf:field" dir="rtl" lang="ar">
<label class="plf:field-label" for="time-rtl">وقت الاجتماع</label>
<input class="plf:input" id="time-rtl" type="time" data-plf-time-picker value="16:15" aria-describedby="time-rtl-help">
<p class="plf:field-help" id="time-rtl-help">يتبع الحقل اتجاه القراءة.</p>
</div>
</div>import { Field, TimePicker } from '@pelatform/react';
export function Example() {
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<Field label="Pickup time" error="Choose a time after 08:00.">
<TimePicker defaultValue="07:00" />
</Field>
<Field label="Check-in" help="Set by the venue.">
<TimePicker defaultValue="15:00" readOnly />
</Field>
<Field label="Check-out" help="Unavailable for this booking.">
<TimePicker defaultValue="11:00" disabled />
</Field>
<Field label="وقت الاجتماع" help="يتبع الحقل اتجاه القراءة." dir="rtl" lang="ar">
<TimePicker defaultValue="16:15" />
</Field>
</div>
);
}import { Field, TimePicker } from '@pelatform/react/prefixed';
export function Example() {
return (
<div className="plf:grid plf:grid-cols-1 plf:md:grid-cols-2 plf:lg:grid-cols-4 plf:gap-4">
<Field label="Pickup time" error="Choose a time after 08:00.">
<TimePicker defaultValue="07:00" />
</Field>
<Field label="Check-in" help="Set by the venue.">
<TimePicker defaultValue="15:00" readOnly />
</Field>
<Field label="Check-out" help="Unavailable for this booking.">
<TimePicker defaultValue="11:00" disabled />
</Field>
<Field label="وقت الاجتماع" help="يتبع الحقل اتجاه القراءة." dir="rtl" lang="ar">
<TimePicker defaultValue="16:15" />
</Field>
</div>
);
}<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="field">
<label class="field-label" for="time-sm">Small</label>
<input class="input input-sm" id="time-sm" type="time" data-plf-time-picker value="08:45">
</div>
<div class="field">
<label class="field-label" for="time-md">Default</label>
<input class="input" id="time-md" type="time" data-plf-time-picker value="08:45">
</div>
<div class="field">
<label class="field-label" for="time-lg">Large</label>
<input class="input input-lg" id="time-lg" type="time" data-plf-time-picker value="08:45">
</div>
</div><div class="plf:grid plf:grid-cols-1 plf:md:grid-cols-3 plf:gap-4">
<div class="plf:field">
<label class="plf:field-label" for="time-sm">Small</label>
<input class="plf:input plf:input-sm" id="time-sm" type="time" data-plf-time-picker value="08:45">
</div>
<div class="plf:field">
<label class="plf:field-label" for="time-md">Default</label>
<input class="plf:input" id="time-md" type="time" data-plf-time-picker value="08:45">
</div>
<div class="plf:field">
<label class="plf:field-label" for="time-lg">Large</label>
<input class="plf:input plf:input-lg" id="time-lg" type="time" data-plf-time-picker value="08:45">
</div>
</div>import { Field, TimePicker } from '@pelatform/react';
export function Example() {
return (
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Field label="Small">
<TimePicker size="sm" defaultValue="08:45" />
</Field>
<Field label="Default">
<TimePicker defaultValue="08:45" />
</Field>
<Field label="Large">
<TimePicker size="lg" defaultValue="08:45" />
</Field>
</div>
);
}import { Field, TimePicker } from '@pelatform/react/prefixed';
export function Example() {
return (
<div className="plf:grid plf:grid-cols-1 plf:md:grid-cols-3 plf:gap-4">
<Field label="Small">
<TimePicker size="sm" defaultValue="08:45" />
</Field>
<Field label="Default">
<TimePicker defaultValue="08:45" />
</Field>
<Field label="Large">
<TimePicker size="lg" defaultValue="08:45" />
</Field>
</div>
);
}JavaScript
Click to open needs JavaScript; the field itself needs none. The Full script (pelatform-ui.min.js) starts every component on page load, with no code of your own; with ESM imports, call init() yourself, as in Installation. For markup you add later, see Dynamic content.
<link rel="stylesheet" href="pelatform-ui.min.css">
<script src="pelatform-ui.min.js" defer></script><link rel="stylesheet" href="core/pelatform-ui-core.min.css">
<link rel="stylesheet" href="components/form.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/time-picker.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script><link rel="stylesheet" href="pelatform-ui.prefixed.min.css">
<script src="pelatform-ui.min.js" defer></script><link rel="stylesheet" href="core/pelatform-ui-core.prefixed.min.css">
<link rel="stylesheet" href="components/form.prefixed.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/time-picker.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>| Attribute | Purpose |
|---|---|
data-plf-time-picker |
On a native <input type="time">: a pointer click opens the browser’s picker; keyboard focus does not, and read-only or disabled fields stay closed |
| Method | Behavior |
|---|---|
PLF. |
Returns the instance, creating it for a time input |
PLF. |
Returns the instance or null |
instance. |
Removes the click listener |
TimePicker fires no events of its own; listen to the native input and change events. The browser handles the keyboard.
React
TimePicker from @pelatform/react renders the native time input, whose picker a click opens as the script’s does; inside a Field it takes the field’s label, help and error.
| Prop | Values | Default |
|---|---|---|
size |
sm, lg |
The default size |
The other props are a native input’s, className and ref included.
CSS variables
Time Picker uses the Input variables; these set its height and active segment.
| Variable | Default |
|---|---|
--plf-input-height |
2. (36px); 2rem (32px) with input-sm, 2. (40px) with input-lg |
--plf-color-primary-border |
--plf-color-primary at 40% on the surface; fills the active hour, minute or second segment in Chromium and WebKit |