Time Picker · CropWatch UI

CwTimePicker

Standalone time-of-day picker with 24-hour editing and stepper controls. In locales that use a 12-hour clock it also shows an AM/PM readout (twelveHourDisplay="auto", the default).

Irrigation Start

Forced 12-hour readout so the AM/PM conversion is always visible.

Irrigation start 24-hour clock

12-hour time 12:00 AM

{
  "hours": 6,
  "minutes": 30
}

Stepped Selection

A 5-minute step keeps common scheduling workflows fast without losing the 24-hour format.

Lights out 24-hour clock

{
  "hours": 21,
  "minutes": 45
}

Disabled State

Disabled styling keeps the same theme language in both light and dark mode.

Maintenance window 24-hour clock

{
  "hours": 13,
  "minutes": 0
}

Required, error & localised labels

Errors are linked to the inputs with aria-describedby. Every string can be replaced through labels.

Frost check 24時間表示

Must be before sunrise (05:30)

Last event: none yet

<script lang="ts">
	import { CwTimePicker } from '@cropwatchdevelopment/cwui';
	import type { CwTimeValue } from '@cropwatchdevelopment/cwui';

	let quietHours = $state<CwTimeValue>({ hours: 22, minutes: 0 });
	function save(value: CwTimeValue) {
		// persist the schedule
	}
</script>

<CwTimePicker
	label="Quiet hours begin"
	minuteStep={5}
	bind:value={quietHours}
	onchange={(value) => save(value)}
/>

API

Usage and API reference

CwTimePicker keeps time-of-day editing separate from calendar workflows. It always edits in 24-hour format and shows the same value in 12-hour format below for quick AM/PM confirmation.

How to think about it

Use it when the user already knows the date This control is for time-only workflows such as quiet hours, irrigation starts, and maintenance windows.
Keep the source of truth in 24-hour time The returned value is `{ hours, minutes }`, so the rest of the app can store or combine it with any date it needs.
Use `minuteStep` to fit the schedule precision Leave the default step at `1` for exact times, or raise it for routine schedules such as 5-minute or 15-minute increments.

Props and callbacks

API	Type	Details
`value`	`CwTimeValue`	Current selected time with `{ hours, minutes }`.
`minuteStep` Default: `1`	`number`	Step size used by the minute steppers and minute sanitization.
`label`	`string`	Optional field label shown above the control.
`disabled` Default: `false`	`boolean`	Locks the picker and dims the UI.
`error`	`string`	Optional validation message rendered below the picker.
`name / required`	`native attrs`	Form integration for the hidden `HH:MM` field value.
`onchange`	`(value: CwTimeValue) => void`	Runs after the user commits a changed time.
`labels`	`CwTimePickerLabels`	Every visible and accessible string, for localisation.
`twelveHourDisplay` Default: `'auto'`	`boolean \| 'auto'`	Shows the 12-hour reading next to the 24-hour inputs. `auto` shows it only in 12-hour locales.
`locale`	`string`	BCP 47 locale for number and date formatting. Defaults to the runtime locale.

Copy-paste examples

Each snippet is a complete, working example you can paste into a Svelte 5 component.

Basic time-only picker

Good for shift starts, alarms, and single schedule points.

<script lang="ts">
	import { CwTimePicker } from '@cropwatchdevelopment/cwui';
	import type { CwTimeValue } from '@cropwatchdevelopment/cwui';

	let startTime = $state<CwTimeValue>({ hours: 6, minutes: 30 });
</script>

<CwTimePicker
	label="Start time"
	bind:value={startTime}
/>

Stepped scheduling

Raise the minute step when operators only need preset intervals.

<script lang="ts">
	import { CwTimePicker } from '@cropwatchdevelopment/cwui';
	import type { CwTimeValue } from '@cropwatchdevelopment/cwui';

	let quietHours = $state<CwTimeValue>({ hours: 22, minutes: 0 });
</script>

<CwTimePicker
	label="Quiet hours begin"
	minuteStep={15}
	name="quiet-hours"
	bind:value={quietHours}
	onchange={(value) => console.log(value)}
/>