InputDate format dd/mm/yy and select time in UCalendar and inputdate

[VNWA]

Package

v4.x

Description

Please tell me how to format InputDate in dd/mm/yy format and combine with UCalendar to select time 24hour

[sebajans]

Adding to this question, I would like to add the "zeros" in the Input, currently in "DE" locale for the date:
13.05.2025 it always shows 13. 5.2025, which looks off. In german its common to show the "missing" 0.
In Reka UI this is possible, but in Nuxt UI it is not.

[barry166]

For the date order/zero padding, use the component locale rather than a custom mask. UInputDate is based on the internationalized date field API, so formatting comes from locale:

<UInputDate v-model="date" locale="en-GB" /> <!-- dd/mm/yyyy-style order -->

For 24-hour time, set hour-cycle on the time/date-time field:

<UInputTime v-model="time" :hour-cycle="24" />

If you want one value containing both date and time, bind UInputDate to a CalendarDateTime/ZonedDateTime value and use granularity="minute" plus :hour-cycle="24". If you want a calendar popup plus a time picker UI, the usual shape is UPopover + UCalendar for the date and UInputTime for the time, then combine those into the value you submit.