Date Picker · CropWatch UI

CwDateTimeRangePicker

Single dates or ranges at day, month or year granularity, with optional time. The calendar grid is keyboard-operable (arrows, Home/End, PageUp/PageDown, Shift+Page for years) and month and weekday names follow the locale.

Modes and granularity

Single day

Nothing selected

Date range

Nothing selected

Month

Nothing selected

Range with time

Nothing selected

Last event: none yet

Limits, validation and locale

Last 30 days only

Between 30 days ago and today

Planned harvest

Future dates allowed (maxDate={null})

Nothing selected

Report period

Choose a report period

Disabled

日付 (ja-JP)

Nothing selected

<CwDateTimeRangePicker
	label="Report period"
	mode="range"
	granularity="day"
	includeTime
	required
	minDate={thirtyDaysAgo}
	bind:value
/>

<!-- maxDate defaults to today; pass null to allow future dates -->
<CwDateTimeRangePicker label="Harvest date" maxDate={null} bind:value={harvest} />

API

Usage and API reference

CwDateTimeRangePicker covers single dates, ranges, month and year picking, and optional time entry. The returned value shape changes with `mode`, so decide that up front.

How to think about it

Choose single or range mode first Single mode returns `{ date }`, while range mode returns `{ start, end }`. That choice drives the value shape for the rest of the form.
Pick the granularity that matches the report Use `day` for exact dates, `month` for monthly rollups, and `year` for broad reporting periods.
Enable time only when the workflow needs it Including time adds more controls, more value fields, and explicit Set/Cancel confirmation, so keep it off for date-only filters.

Props and callbacks

API	Type	Details
`mode` Default: `single`	`'single' \| 'range'`	Controls whether the component returns one date or a date range.
`granularity` Default: `day`	`'year' \| 'month' \| 'day'`	Controls the picker depth.
`includeTime` Default: `false`	`boolean`	Adds time selection, along with Set/Cancel controls, to the returned value.
`value`	`CwDateValue \| undefined`	Current selected date or range.
`maxDate` Default: `new Date()`	`Date`	Latest selectable date.
`onchange`	`(value: CwDateValue) => void`	Runs whenever a valid selection is emitted.
`name / required / placeholder / autocomplete`	`native attrs`	Optional form integration attributes for the visible trigger input.
`label`	`string`	Visible label above the trigger.
`id`	`string`	Id for the trigger, for external labels.
`hint`	`string`	Helper text under the field. Replaced by `error` when both are set.
`error`	`string`	Error message under the field. Sets `aria-invalid` and links the text with `aria-describedby`.
`required` Default: `false`	`boolean`	Shows a required marker and sets `aria-required` on the control.
`disabled` Default: `false`	`boolean`	Disables the trigger.
`minDate`	`Date \| null`	Earliest selectable date.
`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.

Single month picker

Good for monthly reports or billing cycles.

<script lang="ts">
	let monthValue = $state<CwDateValue | undefined>();
</script>

<CwDateTimeRangePicker
	mode="single"
	granularity="month"
	bind:value={monthValue}
/>

Range picker with time

Use this for precise reporting windows or scheduled operations.

<script lang="ts">
	let rangeValue = $state<CwDateValue | undefined>();
</script>

<CwDateTimeRangePicker
	mode="range"
	granularity="day"
	includeTime
	name="report-window"
	required
	placeholder="Select report window..."
	maxDate={new Date()}
	bind:value={rangeValue}
	onchange={(value) => console.log(value)}
/>