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

<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

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

<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

<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

<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

<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

<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

<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

<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

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

<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

<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

<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

<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

<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

<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

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

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

<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

<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