TimePickerInput
TimePickerInput opens a time picker from a form field and displays the selected time.
Source
LLM docs
Package
npm install @plocks/datesExamples
3
Properties
74
Playground
Basics
TimePickerInput opens a time picker from a form field and displays the selected time.
Loading demo…
import React, { useState } from 'react';
import { Block, Text } from '@plocks/ui';
import { TimePickerInput } from '@plocks/dates';
import type { TimePickerValue } from '@plocks/dates';
export function Demo() {
const [value, setValue] = useState<TimePickerValue | null>({ hours: 9, minutes: 30 });
const formatted = value
? `${((value.hours + 11) % 12) + 1}:${String(value.minutes).padStart(2, '0')} ${value.hours >= 12 ? 'PM' : 'AM'}`
: null;
return (
<Block fullWidth>
<TimePickerInput
value={value}
onChange={setValue}
label="Meeting time"
format={12}
fullWidth
/>
<Text size="sm" c="secondary">
{formatted ? `Selected: ${formatted}` : 'No time selected'}
</Text>
</Block>
);
}Variants
Compare the default, filled, outline, and unstyled field shells on TimePickerInput.
Loading demo…
import { Column } from '@plocks/ui';
import { TimePickerInput } from '@plocks/dates';
const variants = ['default', 'filled', 'outline', 'unstyled'] as const;
export function Demo() {
return (
<Column gap="md" fullWidth>
{variants.map(variant => (
<TimePickerInput key={variant} variant={variant} label={`${variant} variant`} placeholder="Choose a time" />
))}
</Column>
);
}Validation
Validation example showing custom error when outside allowed business hours (09:00-17:00).
Loading demo…
import React, { useState } from 'react';
import { Block, Text } from '@plocks/ui';
import { TimePickerInput } from '@plocks/dates';
import type { TimePickerValue } from '@plocks/dates';
const withinBusiness = (v: TimePickerValue) => {
const totalMinutes = v.hours * 60 + v.minutes;
return totalMinutes >= 9 * 60 && totalMinutes <= 17 * 60; // 09:00 - 17:00 inclusive
};
export function Demo() {
const [value, setValue] = useState<TimePickerValue | null>({ hours: 8, minutes: 45 });
const [error, setError] = useState<string | undefined>(undefined);
const handleChange = (next: TimePickerValue | null) => {
setValue(next);
if (!next) {
setError(undefined);
return;
}
if (!withinBusiness(next)) {
setError('Select a time between 09:00 and 17:00');
} else {
setError(undefined);
}
};
return (
<Block fullWidth>
<TimePickerInput
value={value}
onChange={handleChange}
label="Meeting time"
error={error}
helperText="Business hours only"
clearable
fullWidth
/>
{value && (
<Text size="sm" c="secondary">
Selected: {value.hours.toString().padStart(2, '0')}:{value.minutes.toString().padStart(2, '0')}
</Text>
)}
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources