CropWatch User Interface

CwDateTimeRangePicker

Calendar picker — single/range, day/month/year granularity, optional time.

Single Day

Date Range

Month Granularity

With Time

<CwDateTimeRangePicker
	mode="range"
	granularity="day"
	includeTime
	bind:value={value}
/>

Documentation Upgrade

Start here

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 and more value fields, 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 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.

Copy-paste examples

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

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