Date Input

The catnip-input-date custom element lets users type or pick a single date, date and time, or date range from a floating calendar panel. It uses the same integrated label and supporting-text patterns as Input, Number Input, and Chip Input. Shared field behaviour is summarised on Inputs overview.

Overview

catnip-input-date values are canonical date strings, not UTC timestamps. Single-date values must use YYYY-MM-DD. Date-time values use YYYY-MM-DDTHH:mm without a timezone suffix, so they represent the selected calendar date and time rather than a converted UTC instant. Use display-format only to change the visible text in the input.

• Single date (v-model): model-value / .modelValue is a string in YYYY-MM-DD format. Calendar selection commits immediately when show-time is off.
• Date and time: Set show-time to commit YYYY-MM-DDTHH:mm. Values commit as the selected date/time becomes valid; set show-actions when users should confirm with Submit.
• Range: Set mode="range" to bind { start?: string; end?: string }. By default, range emits after the end date is selected; set show-actions for draft selection with Clear / Submit.
• Display format: Set display-format and display-date-time-format with Day.js-style format tokens to change visible input text only. Emitted values stay canonical.
• Inline clear: Set show-clear-button to show a reset icon inside the trigger, immediately before the calendar icon.
• Constraints: Use min, max, and disabled-dates to block invalid calendar cells. In range mode, use max-range-days to cap the inclusive number of calendar days between start and end.
• Calendar: The panel has month navigation, a clickable month/year header for year selection, weekday headers, current/selected/range states, and keyboard navigation for day movement.

Live example

Accessibility

• Label: Use the label prop or label slot; for / id wiring is handled automatically.
• Trigger: The native text input exposes aria-haspopup="grid", aria-expanded, and panel linkage while open.
• Calendar: Arrow keys move by day/week, Home / End move within the week, PageUp / PageDown change month, Shift + PageUp / Shift + PageDown change year, Enter / Space select, and Escape closes.
• Invalid state: intent="danger" sets aria-invalid="true" on the control; aria-describedby includes supporting text when present.