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`	`'Apply'`
`clearLabel`	`clear-label`	`string`	`'Clear'`
`clearable`	`clearable`	`boolean`	`true`
`disabled`	`disabled`	`boolean`	`false`
`helperText`	`helper-text`	`string`	`''`
`label`	`label`	`string`	`''`
`locale`	`locale`	`string`	`'es'`	BCP-47 locale tag used by Intl.DateTimeFormat.
`placeholder`	`placeholder`	`string`	`'Select range'`
`presetLast30DaysLabel`	`preset-last-3-0-days-label`	`string`	`'Last 30 days'`
`presetLast90DaysLabel`	`preset-last-9-0-days-label`	`string`	`'Last 90 days'`
`presetThisMonthLabel`	`preset-this-month-label`	`string`	`'This month'`
`presetThisWeekLabel`	`preset-this-week-label`	`string`	`'This week'`
`presetThisYearLabel`	`preset-this-year-label`	`string`	`'This year'`
`presetTodayLabel`	`preset-today-label`	`string`	`'Today'`
`presets`	`presets`	`boolean`	`true`
`status`	`status`	`"default" \| "error" \| "success"`	`'default'`
`value`	`value`	`string`	`''`	JSON `{from, to}` or empty string.

Eventos

Evento	Detail	Bubbles	Cancelable	Descripción
`coChange`	`DateRangeValue`	✓	✓
`coClear`	`void`	✓	✓

Slots

Este componente no expone slots.

CSS Parts

Part	Descripción
`::part(helper)`
`::part(label)`
`::part(popover)`
`::part(root)`
`::part(trigger)`

CSS Custom Properties

Este componente no expone CSS custom properties.