View Dates

Display formatted date ranges with support for single dates, date ranges, and "Present" indicators.

Live Demo

Mar 15, 2024

Jan 1, 2022

-

Jun 30, 2024

May 1, 2023

-

Present

Usage

Single Date

<template>
  <orio-view-dates :dates="{ startDate: '2024-03-15' }" />
</template>

Date Range

<template>
  <orio-view-dates :dates="{ startDate: '2022-01-01', endDate: '2024-06-30' }" />
</template>

Current (with "Present")

Use null for endDate to display "Present":

<template>
  <orio-view-dates :dates="{ startDate: '2023-05-01', endDate: null }" />
</template>

Month/Year Format

Use month prop to show only month and year:

<template>
  <orio-view-dates :dates="dates" month />
</template>

Props

Prop	Type	Default	Description
dates	ResumeDate	required	Date object with startDate and optional endDate
month	boolean	false	Show only month/year instead of full date
size	'small' | 'medium' | 'large'	'small'	Text size
type	'text' | 'title' | 'subtitle' | 'italics'	'italics'	Text style

Types

interface ResumeDate {
  startDate: string;
  endDate?: string | null; // undefined = single date, null = "Present"
}

Notes

• Uses Intl.DateTimeFormat for localized formatting (en-US)
• When endDate is undefined, only the start date is shown
• When endDate is null, "Present" is displayed
• Internally uses orio-view-text for consistent typography