Skip to main content
Sync UI provides a collection of versatile date picker components designed for seamless date selection, featuring single date, date range, preset options, and time selection capabilities.

Features

  • Single date selection
  • Date range selection with visual feedback
  • Quick preset options (Today, Yesterday, This Week, etc.)
  • Combined date and time picker
  • Smart calendar navigation
  • Today indicator
  • Responsive design
  • Theme-aware styling

Variants

Single

A standard calendar date picker for selecting a single date. Features:
  • Click to select date
  • Month navigation
  • Today indicator
  • Keyboard navigation

Range

Select start and end dates for a date range. Features:
  • Visual range highlighting
  • Automatic start/end ordering
  • Range indicator
  • Click to select start and end dates

With Presets

Quick select with preset date range options. Features:
  • Common presets (Today, Yesterday, This Week, Last 7/30 Days, This Month)
  • One-click date range selection
  • Custom range support
  • Preset buttons with hover feedback

With Time

Combined date and time selection with hours, minutes, and AM/PM. Features:
  • Date selection from calendar
  • Time input with increment/decrement buttons
  • 12-hour format with AM/PM toggle
  • Validation for time inputs
  • Combined display format

Build docs developers (and LLMs) love