Date and Time Pickers

The UI kit has three date components. The admin uses <CwaUiDatePicker> for a component's scheduled publish time and a route's Goes live date, and you can use all three in your own admin tabs and pages. Like the rest of the kit, they're auto-imported with the CwaUi prefix. They're built on reka-ui and ported from Nuxt UI's Calendar and InputDate.

Use <CwaUiDatePicker> when you're storing a date in the API. The other two are the parts it's built from, for when you need a date without a time, a range, or several dates.

CwaUiDatePicker

<script setup lang="ts">
const goLive = ref<string | null>(null)
const now = new Date().toISOString()
</script>

<template>
  <CwaUiDatePicker v-model="goLive" label="Goes live" :min="now" />
</template>

The field has day, month, year, hour and minute segments, on a 24-hour clock. Editors type into a segment or step it with the arrow keys, or open the calendar with the button at the end of the field. Picking a day in the calendar keeps the time already set, or uses 09:00 if the field was empty.

Time Zones

The editor picks a time on their own computer's clock, and the picker converts it to UTC. Hovering the calendar button names the zone and its UTC offset: "Times are in Europe/London, UTC+01:00". The offset is the one at the chosen date, not today's, so a time on the other side of a clock change shows the offset that will apply then.

CwaUiCalendar

A calendar on its own. It uses the DateValue types from @internationalized/date. The module depends on it, but pnpm only lets your code import packages your app lists, so add it with the same major version (pnpm add @internationalized/date@^3) and keep to one copy, see Troubleshooting:

<script setup lang="ts">
import { today, getLocalTimeZone } from '@internationalized/date'
import type { DateValue } from '@internationalized/date'

const day = shallowRef<DateValue>()
const earliest = today(getLocalTimeZone())
</script>

<template>
  <CwaUiCalendar v-model="day" :min-value="earliest" />
</template>

The heading switches between the day, month and year views, and the arrow buttons move by a month or a year.

CwaUiInputDate

The segmented field on its own, without the calendar:

<CwaUiInputDate v-model="day" granularity="day" />

Anything in the default slot is shown at the end of the field. <CwaUiDatePicker> puts its calendar button there.

Troubleshooting: the Picker Shows No Time

If <CwaUiDatePicker> shows a date with no hour and minute, check the browser console for this warning:

[CWA] Two copies of @internationalized/date are installed, so reka-ui cannot read the date picker value and its time is not shown.

Your lockfile has two copies of @internationalized/date, so reka-ui doesn't recognise the date-time value the picker gives it. It can happen when your app already had reka-ui installed, for example through Nuxt UI, on an older version. Run this to keep one copy:

pnpm dedupe