Preview

Installation

npx sigma-ui@latest add time-range-field

Usage

<script setup lang="ts">
import { type Ref, ref } from 'vue';
import { Time } from '@internationalized/date';
import type { TimeValue } from 'reka-ui';
import { TimeRangeField } from '@/components/ui/time-range-field';

const value = ref({
  start: new Time(9, 0),
  end: new Time(17, 0),
}) as Ref<{ start: TimeValue; end: TimeValue }>;
</script>

<template>
  <TimeRangeField v-model="value" />
</template>

• v-model is a { start, end } pair of @internationalized/date Time values. granularity is minute by default, and hourCycle switches between a 12-hour and a 24-hour clock.
• The field renders the start segments, a dash, and the end segments, each in a TimeRangeFieldInput. To render them yourself, use the default slot. It gives segments.start and segments.end, and each segment has a part and the value to show:

<template>
  <TimeRangeField v-slot="{ segments }" v-model="value">
    <TimeRangeFieldInput
      v-for="(item, index) in segments.start"
      :key="`start-${item.part}-${index}`"
      :part="item.part"
      type="start"
    >
      {{ item.value }}
    </TimeRangeFieldInput>
    <span>to</span>
    <TimeRangeFieldInput
      v-for="(item, index) in segments.end"
      :key="`end-${item.part}-${index}`"
      :part="item.part"
      type="end"
    >
      {{ item.value }}
    </TimeRangeFieldInput>
  </TimeRangeField>
</template>

Related

• Time Field, for a single time

Examples

Office hours

API Reference

TimeRangeField

Props

Prop	Type	Default
defaultValue The default value for the field	TimeRange	-
defaultPlaceholder The default placeholder time	TimeValue	-
placeholder The placeholder time, which is used to determine what time to display when no time is selected. This updates as the user navigates the field	TimeValue	-
modelValue The controlled checked state of the field. Can be bound as v-model.	TimeRange | null	-
hourCycle The hour cycle used for formatting times. Defaults to the local preference	HourCycle	-
step The stepping interval for the time fields. Defaults to 1.	DateStep	-
granularity The granularity to use for formatting times. Defaults to minute. The field will render segments for each part of the time up to and including the specified granularity	"hour" | "minute" | "second"	-
hideTimeZone Whether or not to hide the time zone segment of the field	boolean	-
maxValue The maximum time that can be selected	TimeValue	-
minValue The minimum time that can be selected	TimeValue	-
locale The locale to use for formatting times	string	-
disabled Whether or not the time field is disabled	boolean	-
readonly Whether or not the time field is readonly	boolean	-
id Id of the element	string	-
dir The reading direction of the time field when applicable. <br> If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.	Direction	-
isTimeUnavailable A function that returns whether or not a time is unavailable	Matcher	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
name The name of the field. Submitted with its owning form as part of a name/value pair.	string	-
required When true, indicates that the user must set the value before the owning form can be submitted.	boolean	-

Events

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

Slots

Slot	Scope
default The start and end segments. Each one renders in a TimeRangeFieldInput, with a dash between the two times, unless you pass your own content.	{ modelValue: TimeRange | null; segments: { start: { part: SegmentPart; value: string; }[]; end: { part: SegmentPart; value: string; }[]; }; isInvalid: boolean; }

TimeRangeFieldInput

Props

Prop	Type	Default
partrequired The part of the date to render	SegmentPart	-
typerequired The type of field to render (start or end)	DateRangeType	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Each segment is a spin button. Arrow keys change the focused segment, and left and right move between segments.

Key	Description
ArrowUp or ArrowDown	Increases or decreases the focused segment.
ArrowLeft or ArrowRight	Moves to the previous or next segment.