co-date-field

This content is not available in your language yet.

Permite escribir la fecha a mano y mantiene el borrador (texto crudo) separado del valor confirmado, de modo que un padre controlado nunca pisa lo que el usuario teclea. El texto visible se formatea según display-format (por defecto d MMM yyyy, es-CO). Controla la tecla Enter para validar la fecha en lugar de enviar el formulario. Es la base de co-date-picker.

Demo

Ver código

<co-date-field label="Fecha" value="2026-06-03" helper-text="Formato dd/MM/yyyy"></co-date-field>

API

Props

Prop	Atributo	Tipo	Default	Descripción
`clearLabel`	`clear-label`	`string \| undefined`	`—`	Override the clear-button aria-label (defaults from `locale`).
`clearable`	`clearable`	`boolean`	`true`
`disabled`	`disabled`	`boolean`	`false`
`disabledDates`	`disabled-dates`	`string \| string[] \| undefined`	`—`	Blocked dates (string[] or JSON/comma string).
`disabledDaysOfWeek`	`disabled-days-of-week`	`number[] \| string \| undefined`	`—`	Blocked weekdays 0=Sun..6=Sat (number[] or JSON/comma string).
`displayFormat`	`display-format`	`string`	`'d MMM yyyy'`	Display pattern (tokens yyyy/yy/MMMM/MMM/MM/M/dd/d).
`errorMessage`	`error-message`	`string \| undefined`	`—`	Message shown when invalid.
`helperText`	`helper-text`	`string \| undefined`	`—`	Helper text shown when valid.
`invalid`	`invalid`	`boolean`	`false`	External invalid flag (e.g. from a form controller). OR'd with internal parse failure.
`label`	`label`	`string \| undefined`	`—`
`layout`	`layout`	`"horizontal" \| "vertical"`	`'vertical'`	Label layout: vertical (label above) or horizontal (label beside)
`locale`	`locale`	`string`	`'es-CO'`	BCP-47 locale.
`max`	`max`	`string \| undefined`	`—`	Latest allowed date, "YYYY-MM-DD".
`min`	`min`	`string \| undefined`	`—`	Earliest allowed date, "YYYY-MM-DD".
`name`	`name`	`string \| undefined`	`—`
`placeholder`	`placeholder`	`string \| undefined`	`—`
`readonly`	`readonly`	`boolean`	`false`
`required`	`required`	`boolean`	`false`
`size`	`size`	`"lg" \| "md" \| "s" \| "sm"`	`'md'`	Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48.
`value`	`value`	`null \| string`	`null`	Committed value, "YYYY-MM-DD" or null.

Eventos

Evento	Detail	Bubbles	Cancelable	Descripción
`coBlur`	`void`	✓	✓
`coChange`	`null \| string`	✓	✓	Emitted when a valid value (or null) is committed.
`coClear`	`void`	✓	✓	Emitted when cleared.
`coFocus`	`void`	✓	✓
`coInput`	`string`	✓	✓	Emitted on every keystroke with the raw text.
`coInvalid`	`{ raw: string; }`	✓	✓	Emitted when a committed parse fails. Detail carries the raw text.

Slots

Este componente no expone slots.

CSS Parts

Part	Descripción
`::part(clear)`	The clear button
`::part(field)`	The bordered input row
`::part(helper)`	The helper/error text row
`::part(input)`	The native input element
`::part(label)`	The field label
`::part(wrapper)`	Root container

CSS Custom Properties

Este componente no expone CSS custom properties.