TimePicker
TimePicker provides an inline panel for choosing hours, minutes, and optional seconds.
Source
LLM docs
Package
npm install @plocks/datesExamples
3
Properties
40
Playground
Basics
Basic controlled usage of the inline TimePicker panel with 24-hour format.
Loading demo…
import React, { useState } from 'react';
import { Block, Text } from '@plocks/ui';
import { TimePicker } from '@plocks/dates';
import type { TimePickerValue } from '@plocks/dates';
export function Demo() {
const [value, setValue] = useState<TimePickerValue>({ hours: 13, minutes: 30 });
const formatted = `${String(value.hours).padStart(2, '0')}:${String(value.minutes).padStart(2, '0')}`;
return (
<Block fullWidth>
<TimePicker value={value} onChange={setValue} />
<Text size="sm" c="secondary">{`Selected: ${formatted}`}</Text>
</Block>
);
}Format 12h
Using 12-hour clock format with AM/PM toggle.
Loading demo…
import React, { useState } from 'react';
import { Block, Text } from '@plocks/ui';
import { TimePicker } from '@plocks/dates';
import type { TimePickerValue } from '@plocks/dates';
export function Demo() {
const [value, setValue] = useState<TimePickerValue>({ hours: 0, minutes: 15 });
const formatted = `${String(value.hours).padStart(2, '0')}:${String(value.minutes).padStart(2, '0')}`;
return (
<Block fullWidth>
<TimePicker value={value} onChange={setValue} format={12} />
<Text size="sm" c="secondary">
{`Internal (24h): ${formatted}`}
</Text>
</Block>
);
}With Seconds
Including seconds selection in the TimePicker panel.
Loading demo…
import React, { useState } from 'react';
import { Block, Text } from '@plocks/ui';
import { TimePicker } from '@plocks/dates';
import type { TimePickerValue } from '@plocks/dates';
export function Demo() {
const [value, setValue] = useState<TimePickerValue>({ hours: 9, minutes: 5, seconds: 30 });
const formatted = `${String(value.hours).padStart(2, '0')}:${String(value.minutes).padStart(2, '0')}:${String(value.seconds || 0).padStart(2, '0')}`;
return (
<Block fullWidth>
<TimePicker value={value} onChange={setValue} withSeconds />
<Text size="sm" c="secondary">{`Selected: ${formatted}`}</Text>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources