co-date-picker

La escritura manual y la selección en el calendario confluyen en el mismo valor YYYY-MM-DD (o null); el calendario es una ayuda, nunca la única entrada. Al hacer clic en el campo se abre el calendario, ArrowDown mueve el foco a la cuadrícula, Enter/clic en un día confirma y cierra, y Escape cierra devolviendo el foco al campo. En viewports estrechos se muestra como hoja inferior.

Demo

Ver código

<co-date-picker label="Fecha" value="2026-06-15"></co-date-picker>

API

Props

Prop	Atributo	Tipo	Default	Descripción
`clearable`	`clearable`	`boolean`	`true`
`closeOnSelect`	`close-on-select`	`boolean`	`true`	Close the popover when a day is selected.
`disabled`	`disabled`	`boolean`	`false`
`disabledDates`	`disabled-dates`	`string \| string[] \| undefined`	`—`
`disabledDaysOfWeek`	`disabled-days-of-week`	`number[] \| string \| undefined`	`—`
`displayFormat`	`display-format`	`string`	`'d MMM yyyy'`
`errorMessage`	`error-message`	`string \| undefined`	`—`
`firstDayOfWeek`	`first-day-of-week`	`number`	`1`
`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`	`—`
`min`	`min`	`string \| undefined`	`—`
`mobileBreakpoint`	`mobile-breakpoint`	`number`	`600`	Max viewport width (px) that renders the calendar as a bottom sheet.
`name`	`name`	`string \| undefined`	`—`
`open`	`open`	`boolean`	`false`	Whether the calendar popover is open.
`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'`	Popover placement relative to the field.
`readonly`	`readonly`	`boolean`	`false`
`required`	`required`	`boolean`	`false`
`size`	`size`	`"lg" \| "md" \| "s" \| "sm"`	`'md'`	Field size, forwarded to the inner co-date-field.
`value`	`value`	`null \| string`	`null`	Committed value, "YYYY-MM-DD" or null.

Eventos

Evento	Detail	Bubbles	Cancelable
`coBlur`	`void`	✓	✓
`coChange`	`null \| string`	✓	✓
`coClear`	`void`	✓	✓
`coClose`	`void`	—	✓
`coFocus`	`void`	✓	✓
`coInput`	`string`	✓	✓
`coInvalid`	`{ raw: string; }`	✓	✓
`coOpen`	`void`	—	✓

Slots

Este componente no expone slots.

CSS Parts

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

CSS Custom Properties

Este componente no expone CSS custom properties.