Date Field

Alpha

Enables users to input specific dates within a designated field.

Birthday

mm

/

dd

/

yyyy

<script setup lang="ts">
import { DateFieldInput, DateFieldRoot, Label } from 'radix-vue'
</script>

<template>
  <div class="flex flex-col gap-2">
    <Label class="text-sm text-white" for="date-field">Birthday</Label>
    <DateFieldRoot
      id="date-field"
      v-slot="{ segments }"
      :is-date-unavailable="date => date.day === 19"
      class="w-36 flex select-none bg-white items-center rounded-lg text-center text-green10 border border-transparent p-1 data-[invalid]:border-red-500"
    >
      <template v-for="item in segments" :key="item.part">
        <DateFieldInput
          v-if="item.part === 'literal'"
          :part="item.part"
        >
          {{ item.value }}
        </DateFieldInput>
        <DateFieldInput
          v-else
          :part="item.part"
          class="rounded p-0.5   focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
        >
          {{ item.value }}
        </DateFieldInput>
      </template>
    </DateFieldRoot>
  </div>
</template>

Credit

This component was built taking inspiration from the implementation in melt-ui.

Features

• Full keyboard navigation
• Can be controlled or uncontrolled
• Focus is fully managed
• Localization support
• Highly composable
• Accessible by default
• Supports both date and date-time formats

Preface

The component depends on the @internationalized/date package, which solves a lot of the problems that come with working with dates and times in JavaScript.

We highly recommend reading through the documentation for the package to get a solid feel for how it works, and you'll need to install it in your project to use the date-related components.

Installation

Install the date package.

npm install -D @internationalized/date

Install the component from your command line.

npm install radix-vue

Anatomy

Import all parts and piece them together.

<script setup>
import {
  DateFieldInput,
  DateFieldRoot,
} from 'radix-vue'
</script>

<template>
  <DateFieldRoot>
    <DateFieldInput />
  </DateFieldRoot>
</template>

API Reference

Root

Contains all the parts of a date field

Prop	Default	Type
as	'div'	AsTag | Component The element or component this component should render as. Can be overwrite by asChild
asChild		boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
defaultPlaceholder		DateValue The default placeholder date
defaultValue		DateValue The default value for the calendar
disabled	false	boolean Whether or not the date field is disabled
granularity		'day' | 'hour' | 'minute' | 'second' The granularity to use for formatting times. Defaults to day if a CalendarDate is provided, otherwise defaults to minute. The field will render segments for each part of the date up to and including the specified granularity
hideTimeZone		boolean Whether or not to hide the time zone segment of the field
hourCycle		12 | 24 The hour cycle used for formatting times. Defaults to the local preference
id		string Id of the element
isDateUnavailable		Matcher A function that returns whether or not a date is unavailable
locale	'en'	'tr' | 'th' | 'en' | 'ach' | 'af' | 'am' | 'an' | 'ar' | 'ast' | 'az' | 'be' | 'bg' | 'bn' | 'br' | 'bs' | 'ca' | 'cak' | 'ckb' | 'cs' | 'cy' | 'da' | 'de' | 'dsb' | 'el' | 'eo' | 'es' | ... 49 more ... The locale to use for formatting dates
maxValue		DateValue The maximum date that can be selected
minValue		DateValue The minimum date that can be selected
modelValue		DateValue The controlled checked state of the calendar. Can be bound as v-model.
name		string The name of the date field. Submitted with its owning form as part of a name/value pair.
placeholder		DateValue The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programatically control the calendar view
readonly	false	boolean Whether or not the date field is readonly
required		boolean When true, indicates that the user must check the date field before the owning form can be submitted.

Emit	Payload
update:modelValue	[date: DateValue] Event handler called whenever the model value changes
update:placeholder	[date: DateValue] Event handler called whenever the placeholder value changes

Slots (default)	Payload
modelValue	DateValue | undefined The current date of the field
segments	{ part: SegmentPart; value: string; }[] The date field segment contents
isInvalid	boolean Value if the input is invalid

Methods	Type
setFocusedElement	(el: HTMLElement) => void Helper to set the focused element inside the DateField

Data Attribute	Value
[data-readonly]	Present when readonly
[data-disabled]	Present when disabled
[data-invalid]	Present when invalid

Input

Contains the date field segments

Prop	Default	Type
as	'div'	AsTag | Component The element or component this component should render as. Can be overwrite by asChild
asChild		boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
part*		'day' | 'month' | 'year' | 'hour' | 'minute' | 'second' | 'dayPeriod' | 'literal' | 'timeZoneName' The part of the date to render

Data Attribute	Value
[data-disabled]	Present when disabled
[data-invalid]	Present when invalid

Accessibility

Keyboard Interactions

Key	Description
Tab	When focus moves onto the date field, focuses the first segment.
ArrowLeftArrowRight	Navigates between the date field segments.
ArrowUpArrowDown	Increments/changes the value of the segment.
0-9	When the focus is on a numeric DateFieldInput, it types in the number and focuses the next segment if the next input would result in an invalid value.
Backspace	Deletes a digit from the focused numeric segments.
AP	When the focus is on the day period, it sets it to AM or PM.