intro

DateRangePicker

An organism for selecting a date range, composed of two DatePicker molecules.

The DateRangePicker organism follows the Curva & Concreto doctrine. It wraps two DatePicker molecules in a grid layout to facilitate start and end date selection while natively enforcing dynamic minimum and maximum bounds between the inputs.

Basic Usage

Selected range: 2026-05-01 to 2026-05-10

Min/Max Bounds (May 2026)

Validation (Error State)

Invalid Date Range

Usage

<script>
  import { DateRangePicker } from 'cobogo';

  let start = $state('2026-05-01');
  let end = $state('2026-05-10');
</script>

<DateRangePicker bind:start bind:end />

Props

Prop	Type	Default	Description
`start`	`string`	`undefined`	Bindable start date (`YYYY-MM-DD`).
`end`	`string`	`undefined`	Bindable end date (`YYYY-MM-DD`).
`min`	`string`	`undefined`	Global minimum date.
`max`	`string`	`undefined`	Global maximum date.
`disabled`	`boolean`	`false`	Disables both inputs.
`invalid`	`boolean`	`false`	Sets validation error styling.
`valid`	`boolean`	`false`	Sets validation success styling.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Sizing scale for the inputs.

Dynamic Bounds

The DateRangePicker intrinsically limits choices to prevent illogical date ranges. If a start date is selected, the end date’s internal min attribute is set to that start date. If an end date is selected, the start date’s max is restricted.