vueda

Appearance

View Markdown

Date + Time ​

The date and time family covers segment fields for dates, date ranges, and times, the calendar grids, and two display components. Components describes the rules every component page shares. Each section below states the Visual Contract and links the theme keys and tokens that hold the current values.

Focus styles on the segment fields appear only with real focus. Click into a segment in a demo to see them.

DateField: composition matrix ​

DateField is a segment-based date input. Each date part (year, month, day, and any time parts) is a segment that takes focus on its own. The default slot exposes { segments }, an array of objects with part and value. Render each one with DateFieldInput, passing its part. Literal parts, such as the separators, render as text that does not take focus.

granularity sets the smallest segment shown: "day", "hour", "minute", or "second". size ("sm", "default", or "lg") picks a step on the shared control-height scale: --vueda-control-height-sm, --vueda-control-height, and --vueda-control-height-lg. DateRangeField and TimeField take the same size values.

The field shell is the input shell that Inputs describes, with the same rest, hover, focus, read-only, disabled, invalid, and warning states. The shell shows focus while any segment has focus. The focused segment fills with --accent, and an empty segment shows its placeholder in --muted-foreground. Segment digits keep a fixed width, so the field does not shift as the value changes.

Theme keys: DateField, DateFieldInput.

DateRangeField: composition matrix ​

DateRangeField extends the segment pattern to a start and end pair in one shell. Its default slot exposes { segments } as { start: [...], end: [...] }. Render each array with DateRangeFieldInput, passing part and type ("start" or "end"). The component renders no separator between the two halves, so add your own markup, such as a <span>. The shell and segments match DateField.

Theme keys: DateRangeField, DateRangeFieldInput.

TimeField: composition matrix ​

TimeField renders hour and minute segments. granularity ("hour", "minute", or "second") sets the smallest segment, and hourCycle set to 12 adds an AM/PM segment. The slot matches DateField: { segments } is a flat array, rendered with TimeFieldInput. The shell and segments match DateField.

Theme keys: TimeField, TimeFieldInput.

Calendar: state matrix ​

Calendar renders its header, navigation buttons, weekday row, and date grid itself. Bind the selected date with v-model. The layout prop sets the heading: a text label by default, "month-and-year" for month and year dropdowns, "month-only" for a month dropdown, or "year-only" for a year dropdown. isDateDisabled and isDateUnavailable mark single days.

The calendar has no border, shadow, or footer of its own. The host surface, such as a popover, supplies the edge, and CalendarFooter adds a footer. Each day shows one state:

A disabled calendar shows every day as disabled and turns off its navigation buttons.

Theme keys: Calendar, CalendarCell, CalendarCellTrigger.

RangeCalendar: state matrix ​

RangeCalendar selects a start and end date. The days from start to end form one continuous --accent strip, painted on each RangeCalendarCell so the strip rounds only at its outer ends. The two endpoint days fill with --primary. Other day states match Calendar.

Theme keys: RangeCalendar, RangeCalendarCell, RangeCalendarCellTrigger.

CalendarFooter ​

CalendarFooter is the footer below a Calendar or RangeCalendar in a date picker popover. Its summary slot holds a leading status line, such as the selected range, and its actions slot holds the trailing buttons. The default slot replaces both.

A --border divider separates the footer from the grid above. The summary reads as status text in --muted-foreground, and its digits keep a fixed width, as segment digits do.

Theme keys: CalendarFooter.

Display components ​

DateTimeDisplay and DateRangeDisplay render a value as formatted text that cannot be edited.

DateTimeDisplay's value accepts an ISO string, a MDN: Date, or a Luxon Luxon: DateTime. DateRangeDisplay's start and end accept an ISO string or a Luxon DateTime. ISO strings and Date values render in the reader's time zone, so the demo text below depends on where you open the page. DateTimeDisplay always formats with the en-CA locale. DateRangeDisplay takes a locale prop, which defaults to en-CA.

DateTimeDisplay's format sets the layout:

  • "inline" (default): the absolute value, then the relative label in parentheses.
  • "break": the relative label on a second line.
  • "absolute": the absolute value, with the relative label as its tooltip.
  • "relative": the relative label, with the absolute value as its tooltip.
  • "default", or a custom Luxon format string or options object: the absolute value, with a tooltip formatted by tooltipFormat.

Set showRelative, showTime, or showTooltip to false to drop the relative label, the time, or the tooltip. inline renders the value without a wrapping element, so it sits in the surrounding text.

The relative label ("2 days ago") counts from now and refreshes on a timer. The first card below turns it off so its output stays stable, and the second card shows it.

DateRangeDisplay renders a range on one day as a single date, and shows the month and year once when both ends share them. showTime adds the time to a single-day range.

Theme keys: DateTimeDisplay, DateRangeDisplay.