co-date-range-picker

This content is not available in your language yet.

El disparador muestra el rango confirmado; el popover edita un borrador que solo se confirma al pulsar Aplicar (o, con apply-on-select, en cuanto se eligen ambos extremos, ideal para filtros de tabla). El valor es una cadena JSON con las claves from y to (YYYY-MM-DD), o vacía si no hay selección. Incluye un catálogo de presets configurable con preset-ids.

Demo

Ver código

<co-date-range-picker label="Rango" value='{"from":"2026-06-10","to":"2026-06-20"}'></co-date-range-picker>

API

Props

Prop	Atributo	Tipo	Default	Descripción
`allowSameDay`	`allow-same-day`	`boolean`	`true`	Allow from === to.
`applyLabel`	`apply-label`	`string \| undefined`	`—`
`applyOnSelect`	`apply-on-select`	`boolean`	`false`	Commit (emit coApply) as soon as a full valid range is picked, debounced.
`cancelLabel`	`cancel-label`	`string \| undefined`	`—`
`clearLabel`	`clear-label`	`string \| undefined`	`—`
`clearable`	`clearable`	`boolean`	`true`
`disabled`	`disabled`	`boolean`	`false`
`displayFormat`	`display-format`	`string`	`'d MMM yyyy'`
`errorMessage`	`error-message`	`string \| undefined`	`—`
`firstDayOfWeek`	`first-day-of-week`	`number`	`1`
`fromLabel`	`from-label`	`string \| undefined`	`—`
`helperText`	`helper-text`	`string \| undefined`	`—`
`invalid`	`invalid`	`boolean`	`false`
`label`	`label`	`string \| undefined`	`—`
`layout`	`layout`	`"horizontal" \| "vertical"`	`'vertical'`	Label layout: vertical (label above) or horizontal (label beside)
`locale`	`locale`	`string`	`'es-CO'`
`max`	`max`	`string \| undefined`	`—`
`maxRangeDays`	`max-range-days`	`number \| undefined`	`—`	Maximum span (inclusive days).
`min`	`min`	`string \| undefined`	`—`
`minRangeDays`	`min-range-days`	`number \| undefined`	`—`	Minimum span (inclusive days).
`mobileBreakpoint`	`mobile-breakpoint`	`number`	`600`	Max viewport width (px) that renders the picker as a bottom sheet.
`open`	`open`	`boolean`	`false`
`placeholder`	`placeholder`	`string \| undefined`	`—`
`placement`	`placement`	`"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"`	`'bottom-start'`
`presetIds`	`preset-ids`	`string \| string[] \| undefined`	`—`	Which presets to show, from the built-in catalog: today, yesterday, last7Days, last14Days, last30Days, last90Days, thisWeek, thisMonth, lastMonth, thisYear, lastYear, custom. Labels come from `locale`; dates are computed tz-safe. Accepts a string[] or JSON/comma string. Defaults to a sensible set when omitted.
`presets`	`presets`	`boolean`	`true`	Show the quick-preset column.
`readonly`	`readonly`	`boolean`	`false`
`required`	`required`	`boolean`	`false`	Whether the field is required (renders a required marker on the label).
`size`	`size`	`"lg" \| "md" \| "s" \| "sm"`	`'md'`	Trigger size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48.
`toLabel`	`to-label`	`string \| undefined`	`—`
`value`	`value`	`string`	`''`	JSON `{from,to}` or '' (empty).

Eventos

Evento	Detail	Bubbles	Cancelable
`coApply`	`DateRangeValue`	✓	✓
`coCancel`	`void`	✓	✓
`coClear`	`void`	✓	✓
`coClose`	`void`	—	✓
`coOpen`	`void`	—	✓
`coRangeChange`	`DateRangeValue`	✓	✓
`coRangeEndChange`	`null \| string`	✓	✓
`coRangeStartChange`	`null \| string`	✓	✓

Slots

Este componente no expone slots.

CSS Parts

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

CSS Custom Properties

Este componente no expone CSS custom properties.