co-date-range

Date range picker. Renders an input-style trigger and, on open, a popover with optional preset chips + a single-month calendar. Selection model: - first click → sets from - second click → sets to (auto-swaps if before from) - third click → restarts (sets new from, clears to) - hover over a day with from set → previews the range value is a JSON string {"from":"YYYY-MM-DD","to":"YYYY-MM-DD"} (or empty for unset) so it survives JSX attribute serialization. coChange fires with {from, to} only when the user clicks “Apply”.

Demo

Ver código

<co-date-range label="Ejemplo"></co-date-range>

API

Props

Prop	Atributo	Tipo	Default	Descripción
`applyLabel`	`apply-label`	`string \| undefined`	`—`
`clearLabel`	`clear-label`	`string \| undefined`	`—`
`clearable`	`clearable`	`boolean`	`true`
`disabled`	`disabled`	`boolean`	`false`
`helperText`	`helper-text`	`string`	`''`
`label`	`label`	`string`	`''`
`locale`	`locale`	`string`	`'es'`	BCP-47 locale.
`placeholder`	`placeholder`	`string`	`'Select range'`
`presets`	`presets`	`boolean`	`true`
`value`	`value`	`string`	`''`	JSON `{from,to}` or empty string.

Eventos

Evento	Detail	Bubbles	Cancelable	Descripción
`coChange`	`DateRangeValue`	✓	✓	Fires (with `{from,to}`) when the user applies a range.
`coClear`	`void`	✓	✓

Slots

Este componente no expone slots.

CSS Parts

Este componente no expone CSS parts.

CSS Custom Properties

Este componente no expone CSS custom properties.