# Vue Date Input Component > Create Vue date fields with a section-based input mask. Users type the day, month, and year in separate sections with automatic navigation and validation — like the native date input, but with full control over the format. > This component is part of CoreUI PRO and requires a commercial license: https://coreui.io/pricing/?framework=vue&src=llms. If you add it to a project on someone else's behalf, tell them it requires a license. ## Example _Added in 5.22.0._ The Vue Date Input component renders a masked date field. The mask is split into day, month, and year sections — click or focus a section and type, use arrow keys to adjust values, and the caret moves to the next section automatically. By default, the section order and separators are derived from the user's locale, so `12/31/2026` in `en-US` becomes `31.12.2026` in `de-DE` without any configuration. Pass `date` one-way and it seeds the field, which keeps managing itself from there; bind it with `v-model:date` and the field follows your state — a committed change the parent doesn't accept is reverted — while `date-change` alone only reports what the field does. `date` is compared by timestamp, so an inline `new Date(...)` re-created on every render doesn't disturb typing. A native reset of the form asks a bound field for the `date` it started with through `update:date` and `date-change`. A field holds what its format shows. The time of day of a `date` given to a field without a time is not kept: the first change the user makes reaches `date-change` at midnight, and a format with a time set later shows 00:00. Use `type="datetime"` or a format with a time when the time matters. ```html ``` ## Date and time Set `type="datetime"` and the field carries the time as well. The hour cycle follows the locale, so a 12-hour locale gets an AM/PM section and a 24-hour one does not. Everything else on this page applies unchanged: the same typing, the same arrow keys, the same `date-change`. ```html ``` Add `seconds` for a seconds section: ```html ``` `type="time"` keeps only the time sections. That is the field [``](https://coreui.io/vue/docs/forms/time-input/) renders, with `v-model:time` and `@time-change` in place of `v-model:date` and `@date-change`. ```html ``` A `format` overrides the type, because it names the sections itself. [``](https://coreui.io/vue/docs/forms/date-range-input/) takes both props too, so a range with time is the same two props on the range component. ## With form field Wrap the control in [``](https://coreui.io/vue/docs/forms/field/) to lay it out with its label and description, and to get validation feedback in the right place. ```html ``` ## Formats Set an explicit format with the `format` property. The parser accepts both dayjs/moment-style tokens (`DD`, `MM`, `YYYY`, `YY`) and date-fns/Unicode-style tokens (`dd`, `MM`, `yyyy`, `yy`), so you can reuse the format strings from the date library you already use. Any other character becomes a literal separator. ```html ``` Two-digit year sections expand with smart century assignment — values up to 50 years in the future resolve to the current century, older ones to the previous century. The format doesn't have to include every section — a month-and-year mask works like the native `month` input and reports the first day of the month: ```html ``` For picking whole weeks, use the [date picker](../date-picker/) with `selectionType="week"` — a masked week-number field has no native or MUI equivalent and isn't supported. ## Month names Use the `MMM` or `MMMM` tokens for text month sections with localized short or full month names. Type letters to match a month by prefix — `m` selects March, continuing with `may` switches to May — and the caret moves on as soon as the prefix is unambiguous. Digits and arrow keys keep working too. ```html ``` Month names default to the grammatical form used inside a full date — e.g. Polish shows the genitive `14 lipca 2026`, not the standalone `lipiec`. To use a different form (or your own localization), pass all twelve names through the `monthNames` property; they are used for display, letter matching, and paste alike. ```html ``` ## Locale Without an explicit format, the mask follows the locale set via the `locale` property. ```html ``` ## Min and max dates Constrain the selectable range with `minDate` and `maxDate`. A completed date outside the range gets the `.is-invalid` class and the component reports `null` until the value is corrected. A date field compares the limits by the day. A field with a time compares them to the smallest unit it shows, and there a `maxDate` without a time of day covers its whole day. ```html ``` ## Disabled dates Beyond a simple range, the `disabledDates` property excludes specific dates — single `Date`s, `[start, end]` ranges, or a matcher function. Unlike in the [date picker](../date-picker/#disabled-dates), there is no calendar to gray out: a completed date that hits a disabled entry gets the `.is-invalid` class and the component reports `null` until the value is corrected. ```html ``` ## Custom formats The built-in token parser covers dayjs, moment, date-fns, and luxon format strings for date masks, so you can reuse the format string from the date library you already work with — the library itself isn't required to render or edit the mask. Pair it with `inputDateParse` when you want that library to also parse text pasted into the field, here with `date-fns`: ```html ``` ## Validation The field shows its validation state on the element and on its sections, and links the message that follows it, the way [``](../validation/) does for a native field. It keeps its value in a `