UI.BlueStack.io - Component Library

time-picker Component

Time Picker Class API Reference

Type	Class Options	Usage	Notes
Base	`time-picker`	Main container class	Always required
	`time-input`	Input field class	For the input element
	`dropdown`	Dropdown container	Contains time options
Sizes	`tiny`	Smallest size	32px height
	`small`	Small size	36px height
	default	Medium size	40px height - No class needed
	`large`	Large size	44px height
	`big`	Biggest size	48px height
Formats	`format-12`	12-hour format	AM/PM (default)
	`format-24`	24-hour format	Military time
	`duration`	Duration selector	For time spans
Status	`with-status`	Enable status indicator	Shows status dot
	`available`	Available status	Green indicator
	`busy`	Busy status	Red indicator
	`in-meeting`	In meeting status	Yellow indicator
	`offline`	Offline status	Gray indicator
States	`open`	Dropdown open	Shows time list
	`focused`	Focus state	Ring indicator
	`disabled`	Disabled state	Non-interactive
	`error`	Error state	Red border
Features	`with-timezone`	Show timezone	Displays TZ label
	`inline`	Inline display	Auto width
	`compact`	Compact mode	Reduced height

Basic Time Picker

Default Time Picker

Preview Code

Copy

<div class="time-picker">
  <input type="text" class="time-input" placeholder="Select time" readonly />
  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
    ></path>
  </svg>
  <div class="dropdown">
    <div class="time-list">
      <div class="time-option" data-time="12:00 AM">12:00 AM</div>
      <div class="time-option" data-time="12:30 AM">12:30 AM</div>
      <div class="time-option" data-time="01:00 AM">1:00 AM</div>
      <div class="time-option" data-time="01:30 AM">1:30 AM</div>
      <div class="time-option" data-time="02:00 AM">2:00 AM</div>
      <div class="time-option selected" data-time="09:30 AM">9:30 AM</div>
      <div class="time-option" data-time="10:00 AM">10:00 AM</div>
    </div>
  </div>
</div>

With Label

Preview Code

Copy

Meeting Time

<div class="space-y-2">
  <label class="block text-sm font-medium text-gray-700">Meeting Time</label>
  <div class="time-picker">
    <input type="text" class="time-input" value="9:30 AM" readonly />
    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
      ></path>
    </svg>
  </div>
</div>

Size Variants

All Sizes

Preview Code

Copy

<div class="space-y-3">
  <div class="time-picker tiny">
    <input type="text" class="time-input" placeholder="Tiny" readonly />
    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
      ></path>
    </svg>
  </div>
  <div class="time-picker small">
    <input type="text" class="time-input" placeholder="Small" readonly />
    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
      ></path>
    </svg>
  </div>
  <div class="time-picker">
    <input type="text" class="time-input" placeholder="Default" readonly />
    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
      ></path>
    </svg>
  </div>
  <div class="time-picker large">
    <input type="text" class="time-input" placeholder="Large" readonly />
    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
      ></path>
    </svg>
  </div>
  <div class="time-picker big">
    <input type="text" class="time-input" placeholder="Big" readonly />
    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
      ></path>
    </svg>
  </div>
</div>

Status Indicators

Available Status

Preview Code

Copy

<div class="time-picker with-status">
  <input type="text" class="time-input" value="10:00 AM" readonly />
  <span class="status available"></span>
  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
    ></path>
  </svg>
</div>

Busy Status

Preview Code

Copy

<div class="time-picker with-status">
  <input type="text" class="time-input" value="2:00 PM" readonly />
  <span class="status busy"></span>
  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
    ></path>
  </svg>
</div>

In Meeting Status

Preview Code

Copy

<div class="time-picker with-status">
  <input type="text" class="time-input" value="3:30 PM" readonly />
  <span class="status in-meeting"></span>
  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
    ></path>
  </svg>
</div>

Offline Status

Preview Code

Copy

<div class="time-picker with-status">
  <input type="text" class="time-input" value="6:00 PM" readonly />
  <span class="status offline"></span>
  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
    ></path>
  </svg>
</div>

Time Formats

12-Hour Format

Preview Code

Copy

<div class="time-picker format-12">
  <input type="text" class="time-input" value="2:30 PM" readonly />
  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
    ></path>
  </svg>
</div>

24-Hour Format

Preview Code

Copy

<div class="time-picker format-24">
  <input type="text" class="time-input" value="14:30" readonly />
  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
    ></path>
  </svg>
</div>

With Timezone

Preview Code

Copy

PST

<div class="time-picker with-timezone">
  <input type="text" class="time-input" value="9:30 AM" readonly />
  <span class="timezone">PST</span>
  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
    ></path>
  </svg>
</div>

Duration Selector

Duration Dropdown

Preview Code

Copy

<div class="time-picker duration">
  <select class="duration-select">
    <option value="15">15 minutes</option>
    <option value="30" selected>30 minutes</option>
    <option value="45">45 minutes</option>
    <option value="60">1 hour</option>
    <option value="90">1.5 hours</option>
    <option value="120">2 hours</option>
    <option value="180">3 hours</option>
    <option value="240">4 hours</option>
    <option value="480">All day</option>
  </select>
  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  </svg>
</div>

Time Range

Preview Code

Copy

<div class="time-range">
  <div class="time-picker small">
    <input type="text" class="time-input" value="9:00 AM" readonly />
    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
      ></path>
    </svg>
  </div>
  <span class="separator">to</span>
  <div class="time-picker small">
    <input type="text" class="time-input" value="10:00 AM" readonly />
    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
      ></path>
    </svg>
  </div>
</div>

States

Normal State

Preview Code

Copy

<div class="time-picker">
  <input type="text" class="time-input" value="9:30 AM" readonly />
  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
    ></path>
  </svg>
</div>

Focused State

Preview Code

Copy

<div class="time-picker focused">
  <input type="text" class="time-input" value="9:30 AM" readonly />
  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
    ></path>
  </svg>
</div>

Disabled State

Preview Code

Copy

<div class="time-picker disabled">
  <input type="text" class="time-input" value="9:30 AM" disabled readonly />
  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
    ></path>
  </svg>
</div>

Error State

Preview Code

Copy

<div class="time-picker error">
  <input type="text" class="time-input" value="" placeholder="Required" readonly />
  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
    ></path>
  </svg>
</div>

Quick Time Selection

Quick Time Buttons

Preview Code

Copy

Morning Noon Afternoon Evening

<div class="space-y-3">
  <div class="quick-times">
    <span class="quick-time">Morning</span>
    <span class="quick-time active">Noon</span>
    <span class="quick-time">Afternoon</span>
    <span class="quick-time">Evening</span>
  </div>
  <div class="time-picker">
    <input type="text" class="time-input" value="12:00 PM" readonly />
    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
      ></path>
    </svg>
  </div>
</div>

Advanced Features

Inline Time Picker

Preview Code

Copy

Meeting at

today

<div class="flex items-center gap-2">
  <span class="text-sm text-gray-700">Meeting at</span>
  <div class="time-picker inline small">
    <input type="text" class="time-input" value="2:30 PM" style="width: 100px" readonly />
    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
      ></path>
    </svg>
  </div>
  <span class="text-sm text-gray-700">today</span>
</div>

Compact Mode

Preview Code

Copy

<div class="time-picker compact">
  <input type="text" class="time-input" value="10:30 AM" readonly />
  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
    ></path>
  </svg>
</div>

Loading State

Preview Code

Copy

<div class="time-picker loading">
  <input type="text" class="time-input" placeholder="Loading..." readonly />
  <svg class="icon animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <circle
      class="opacity-25"
      cx="12"
      cy="12"
      r="10"
      stroke="currentColor"
      stroke-width="4"
    ></circle>
    <path
      class="opacity-75"
      fill="currentColor"
      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
    ></path>
  </svg>
</div>

Enhanced Features

✨ JavaScript Enhancements

• Click to open dropdown with time options
• Keyboard navigation (arrow keys, enter, escape)
• Smart time parsing (accepts various formats)
• Scroll to selected time in dropdown
• Customizable time intervals (15, 30, 60 minutes)
• Min/max time constraints
• Auto-format input on blur
• Mobile-friendly touch interactions
• Timezone conversion support
• Quick time presets