CropWatch User Interface

CwTimePicker

Standalone time-of-day picker with 24-hour editing, stepper controls, and a live 12-hour display below.

Irrigation Start

Use the 24-hour editor, then confirm the AM/PM conversion underneath.

Irrigation start 24-hour clock

Hour

Minute

12-hour display 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

Hour

Minute

12-hour display 12:00 AM

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

Disabled State

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

Maintenance window 24-hour clock

Hour

Minute

12-hour display 12:00 AM

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

<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={5}
	bind:value={quietHours}
	onchange={(value) => console.log(value)}
/>

Documentation Upgrade

Start here

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.

Copy-paste examples

These snippets intentionally show the full public API surface the live demo relies on.

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)}
/>