Time Picker Examples | RSL Components

Basic Time Picker

The simplest implementation - just add the data attribute to an input element.

Select a Time

<input type="text"
       data-rsl-time-picker
       data-placeholder="Choose time"
       data-aria-label="Select appointment time">

Time Formats

Choose between 12-hour (AM/PM) and 24-hour (military) time formats.

12-Hour Format (Default)

24-Hour Format

<!-- 12-Hour Format (AM/PM) -->
<input type="text" data-rsl-time-picker data-format="12" data-default-time="now">

<!-- 24-Hour Format (Military) -->
<input type="text" data-rsl-time-picker data-format="24" data-default-time="14:30">

Minute Step Intervals

Control the minute increment - useful for scheduling applications.

5-Minute Steps (Default)

15-Minute Steps

30-Minute Steps

<!-- 15-Minute Intervals -->
<input type="text" data-rsl-time-picker data-step="15">

<!-- 30-Minute Intervals -->
<input type="text" data-rsl-time-picker data-step="30">

Time Range Constraints

Restrict selection to business hours or specific time windows.

Business Hours Only (9 AM - 5 PM)

Evening Hours (6 PM - 10 PM)

<!-- Business Hours -->
<input type="text"
       data-rsl-time-picker
       data-min-time="09:00"
       data-max-time="17:00"
       data-step="15">

<!-- Evening Hours -->
<input type="text"
       data-rsl-time-picker
       data-min-time="18:00"
       data-max-time="22:00"
       data-step="30">

Quick Presets

One-click buttons for common times - Now, Morning, Noon, Afternoon, Evening.

With Presets

Without Presets

<!-- With Quick Presets -->
<input type="text" data-rsl-time-picker data-show-presets="true">

<!-- Without Presets -->
<input type="text" data-rsl-time-picker data-show-presets="false">

List Mode

Use scrolling lists instead of the clock dial for a more compact interface.

List Selector

<!-- List Mode (no clock dial) -->
<input type="text"
       data-rsl-time-picker
       data-show-dial="false"
       data-step="15">

Event Handling

Listen for time changes and other events using standard DOM events.

Select a Time

Events will appear here...

var timePicker = document.querySelector('#event-demo');

timePicker.addEventListener('rsl-time-change', function(e) {
    console.log('Time selected:', e.detail.time);
    console.log('Formatted:', e.detail.formatted);
    console.log('Hours:', e.detail.hours);
    console.log('Minutes:', e.detail.minutes);
    console.log('Period:', e.detail.period);
});

timePicker.addEventListener('rsl-time-open', function() {
    console.log('Picker opened');
});

timePicker.addEventListener('rsl-time-close', function() {
    console.log('Picker closed');
});

timePicker.addEventListener('rsl-time-clear', function() {
    console.log('Time cleared');
});

Programmatic Control

Control the time picker programmatically using the JavaScript API.

Controlled Time Picker

var input = document.querySelector('#programmatic-demo');

// Set to current time
RSL.TimePicker.setValue(input, 'now');

// Set to specific time
RSL.TimePicker.setValue(input, '09:00');
RSL.TimePicker.setValue(input, '17:00');

// Get current value
var value = RSL.TimePicker.getValue(input);
console.log(value); // "09:00"

// Clear value
RSL.TimePicker.clear(input);

// Open/close programmatically
RSL.TimePicker.open(input);
RSL.TimePicker.close(input);

FilterBus Integration

The Time Picker can publish its selection to FilterBus for cross-component filtering. Use time selections to filter Smart Tables, schedules, and more!

Add data-filterbus-publish="timeFilter" to your time picker to publish selections to FilterBus. Other components can subscribe to filter their data by time.

<input type="text"
       data-rsl-time-picker
       data-format="12"
       data-step="15"
       data-filterbus-publish="timeFilter">

View FilterBus Demo API Documentation