GrDateTimePicker

• a moment rather than a day — the start of a meeting, a deadline, a publication time: a date without a time would mean midnight here, which the user did not have in mind;
• a choice of several steps — the day, the hour, the minute; autoApply: false gives a confirmation, so that the value does not leave after the very first click;
• seconds are needed — enableSeconds adds a third column;
• a string goes to the backend — valueAdapter="isoDateTime" gives away '2026-08-12T14:30:00' with no offset: that is what a person sees on the clock.

A period with times on the bounds is not covered by this package: GrDateRangePicker works with dates. It is assembled from two GrDateTimePicker with a check of the order on the side of the form.

When a single date is chosen, a click on a day is the finished value, and there is nothing to confirm. Here the value is assembled from at least two parts, so “apply” means “I am done” rather than repeating what has already been done. The default is true: a date plus an hour is usually enough, and an extra button on every choice is irritating.

editable switches on entry from the keyboard: one string sets both the date and the time.

<GrDateTimePicker v-model="startsAt" editable />

The parsing goes from Intl: where in the string the date is and where the time, what order the parts are in and what separates them is known by the locale rather than by a pattern. It can therefore be typed however is convenient — 8/14/2026 10:15, 8/14/2026, 10:15, 08.14.2026 10:15: the separators are irrelevant to the parsing, which looks at the groups of digits. Locales in which the time goes before the date (vi — 15:30 12/8/26) are parsed the same way.

A typed date without a time does not reset the time — what stands in the model remains; with an empty model that is midnight. What was not typed simply does not change.

Text confirms itself, bypassing autoApply. The prop governs the panel, where the choice is multi-step and “apply” means “I am done”. Enter in the field is already a finished action, and going into a draft would look like “nothing happened”: the field does show the model.

The panel follows the typing. As soon as the date has been typed in full, it is highlighted in the grid and the grid has moved to its month; the typed hour is highlighted in the column of hours, the minutes in the minutes. The model does not change in the process: it is changed by Enter or by the loss of focus. Typing blindly while looking at a panel with the previous value is exactly the error the field was supposed to remove.

A forbidden value is not accepted as text either — neither a date from disabledDates nor a moment past min or max. The rule is one for a click and for Enter, otherwise the field would bypass the restrictions of the panel.

Text that did not parse is rolled back to the model on the loss of focus; apply-on-blur="false" leaves the confirmation to Enter alone. The default placeholder is a hint of the format (MM/DD/YYYY, HH:MM in the letters of the locale), because the order of the parts differs by locale.

With editable the field shows the value in digits rather than as Aug 12, 2026, 09:30: the typing has to read back what is shown, otherwise editing a number right in the field would leave the parser two groups of digits instead of three and would roll back silently. A format of your own overrides that rule — then the readability is the consumer’s responsibility.

The field deliberately has no mask: it would guess the boundary between the date and the time and would get in the way of deleting.

The parsing works over the digits 0–9. Locales with digits of their own (ar-EG, fa-IR) are not supported for typing yet — the display in them is correct, but the entry has to be done with European digits.