Typeable input

Set isModal and isTypeable on a date picker or a range. Without isTypeable the inputs are read-only and only show the selection.

<FunctionalCalendar v-model="value" is-date-range is-modal is-typeable />

Type 5/3/2026 or 05/03/2026 into an input, then try 31/02/2026.

What the input accepts

• Day and month with one or two digits, and a four digit year.
• The separator of dateFormat, which is /, - or .. The default is /.
• Padded and unpadded dates give the same value. 05/03/2026 is stored as 5/3/2026.
• Typing any of -, ., / or a space where a separator belongs inserts the format's separator.
• Letters and extra digits are dropped as you type. A third digit in the day, or a fifth in the year, is not accepted.
• A digit that overflows a full part moves into the next part when you type at the end.

When the value commits

The calendar updates the value only when the text is a complete, real date: all parts present, a four digit year, and a day that exists in that month. 31/02/2026 and 1/1/26 change nothing, and 29/02/2028 is accepted.

In a range, each input commits on its own. Typing a start date does not need an end date.

Paste and autofill

A pasted or autofilled date has its -, ., / and space separators replaced with the separator of dateFormat, so 5.10.2026 becomes 5/10/2026. An ISO date such as 2026-10-05 is reordered to match dateFormat. Other text that is not a date, such as 5 Oct 2026, stays exactly as pasted and changes nothing.

IME input

While an input method editor composes text, the input is left alone. When the composition ends, full-width digits and separators such as １５／０１／２０２７ become ASCII and the date commits.

Time

With displayTimeInput, the time stays in the input text while you edit the date part. Text typed after the date is left as typed. It does not change the selected time, so pick the hour and minute in the time picker.

Undo

When the calendar reformats the text, for example by inserting a separator, the browser clears the input's undo history.

Forms

Enter in these inputs is not intercepted, so a surrounding form submits. See keyboard.

Tags input

The multiple date picker shows its dates as tags. Type a date and press Enter. The date is added if it is valid.

Read the value

The calendar writes typed dates into the object you bound, in place and without an update:modelValue event. An empty {} model also works: the calendar fills in the missing keys when it mounts.