CSS-Only

Temporal Inputs

Native HTML date, time, datetime-local, month, and week inputs with consistent styling through the variant system. Zero classes required.

Example

<input type="date" aria-label="Select date">
<input type="time" aria-label="Select time">
<input type="datetime-local" aria-label="Select date and time">

Input Types

Date

Select a calendar date (year, month, day):

<input type="date" aria-label="Select date" value="2025-12-03">

Time

Select a time of day (hours and minutes):

<input type="time" aria-label="Select time" value="14:30">

Datetime-Local

Select both date and time (no timezone):

<input type="datetime-local" aria-label="Select date and time" value="2025-12-03T14:30">

Month

Select a month and year:

<input type="month" aria-label="Select month" value="2025-12">

Week

Select a week number and year:

<input type="week" aria-label="Select week" value="2025-W49">

Sizes

Use data-size to adjust input dimensions:

<input type="date" data-size="sm" aria-label="Small date picker">
<input type="date" data-size="md" aria-label="Medium date picker">
<input type="date" data-size="lg" aria-label="Large date picker">

Date/Time Ranges

Use .omni-temporal-range to create connected date or time range inputs:

Date Range

to 
<div class="omni-temporal-range">
  <input type="date" data-size="md" aria-label="Start date" value="2025-12-01">
  <span>to</span>
  <input type="date" data-size="md" aria-label="End date" value="2025-12-31">
</div>

Time Range

to 
<div class="omni-temporal-range">
  <input type="time" data-size="md" aria-label="Start time" value="09:00">
  <span>to</span>
  <input type="time" data-size="md" aria-label="End time" value="17:00">
</div>

Datetime Range

to 
<div class="omni-temporal-range">
  <input type="datetime-local" data-size="md" aria-label="Start datetime" value="2025-12-03T09:00">
  <span>to</span>
  <input type="datetime-local" data-size="md" aria-label="End datetime" value="2025-12-03T17:00">
</div>

Input Constraints

Use native HTML attributes to constrain input values:

Min and Max

<input type="date" min="2025-12-01" max="2025-12-31" aria-label="Date in December 2025">
<input type="time" min="09:00" max="17:00" aria-label="Business hours time">

Step

Control granularity with the step attribute (in seconds for time inputs):

<!-- step="900" = 15 minutes (900 seconds) -->
<input type="time" step="900" aria-label="Time in 15-minute intervals">

Required

<input type="date" required aria-label="Birth date (required)">

States

Disabled

<input type="date" disabled value="2025-12-03" aria-label="Disabled date">
<input type="time" disabled value="14:30" aria-label="Disabled time">

Readonly

<input type="date" readonly value="2025-12-03" aria-label="Readonly date">
<input type="time" readonly value="14:30" aria-label="Readonly time">

Full Width

Use data-width="full" to make inputs expand to their container:

<input type="date" data-width="full" aria-label="Full width date">
<input type="datetime-local" data-width="full" aria-label="Full width datetime">

Form Integration

Temporal inputs work seamlessly with standard HTML forms:

to 
<form>
  <label>
    Event Name
    <input type="text" placeholder="Annual Conference" data-width="full">
  </label>

  <label>
    Event Date
    <input type="date" data-width="full" required>
  </label>

  <div class="omni-temporal-range">
    <label>
      Start Time
      <input type="time" data-size="md" required>
    </label>
    <span>to</span>
    <label>
      End Time
      <input type="time" data-size="md" required>
    </label>
  </div>

  <button type="submit" class="omni-button" data-variant="primary">Create Event</button>
</form>

API Reference

Input Types

Type Value Format Description
date YYYY-MM-DD Calendar date (year, month, day)
time HH:MM or HH:MM:SS Time of day (hours, minutes, optional seconds)
datetime-local YYYY-MM-DDTHH:MM Date and time (no timezone)
month YYYY-MM Month and year
week YYYY-WNN Week number and year

Data Attributes

Attribute Values Default Description
data-size sm, md, lg md Input dimensions
data-width auto, full auto Input width behavior

HTML Attributes

Attribute Type Description
min string Minimum value (format matches input type)
max string Maximum value (format matches input type)
step number Value granularity (in seconds for time inputs)
required boolean Field must have a value
disabled boolean Prevent interaction
readonly boolean Display value without editing
value string Current input value

Range Container

Class Description
.omni-temporal-range Flexbox container for connected date/time range inputs

Accessibility

  • Full keyboard navigation support (Tab, Arrow keys, Enter, Space)
  • Native browser date/time pickers provide accessible UIs
  • Always include aria-label or visible <label> elements
  • Focus visible indicators with consistent styling
  • Required fields are announced to screen readers
  • Min/max constraints are validated and announced
  • Disabled state prevents interaction and conveys state visually
  • Readonly state allows focus but prevents editing
  • Works seamlessly with form validation APIs

Best Practices

  • Use type="date" for calendar dates, not text inputs with date pickers
  • Always provide clear labels describing what date/time is being selected
  • Use min and max to guide users to valid ranges
  • Consider time zone implications for datetime-local inputs
  • Use required attribute instead of custom validation when possible
  • For ranges, ensure both inputs have descriptive labels (e.g., "Start date" and "End date")

Browser Support

All modern browsers support temporal input types with native pickers:

  • Chrome/Edge: Full support for all temporal input types
  • Firefox: Full support for all temporal input types
  • Safari: Full support for all temporal input types
  • Mobile browsers: Native date/time pickers optimized for touch

Older browsers that don't support temporal inputs gracefully degrade to text inputs. Consider using a polyfill or custom date picker component for legacy browser support if needed.

Components Used

Other OmniUI components demonstrated on this page:

Button