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.