Time Picker API | RSL Components

Key Features

Clock Dial

Elegant circular clock face for intuitive time selection with animated hand

Quick Presets

One-click presets: Now, Morning, Noon, Afternoon, Evening

Full Keyboard Support

Arrow keys, Tab navigation, Home/End, and natural typing

ADA Compliant

WCAG 2.1 AA with ARIA labels, live regions, and screen reader announcements

Range Mode

Select start and end times for duration or scheduling

FilterBus Integration

Publish time selections for cross-component filtering

Quick Start

1. Include CSS and JavaScript

<link rel="stylesheet" href="styles/time-picker.css">
<script src="javascript/time-picker.js"></script>

2. Add Time Picker to Your HTML

<!-- Basic Time Picker -->
<input type="text" data-rsl-time-picker placeholder="Select time">

<!-- 24-Hour Format -->
<input type="text" data-rsl-time-picker data-format="24">

<!-- With Presets and Min/Max Time -->
<input type="text"
       data-rsl-time-picker
       data-show-presets="true"
       data-min-time="09:00"
       data-max-time="17:00"
       data-step="15">

Auto-Initialization: Time pickers with data-rsl-time-picker are automatically initialized on page load. No JavaScript required for basic usage.

Data Attributes API

Attribute	Type	Default	Description
`data-rsl-time-picker`	Flag	-	Initializes the time picker component
`data-mode`	String	`single`	`single` or `range` (start/end times)
`data-format`	String	`12`	`12` (AM/PM) or `24` (military time)
`data-step`	Number	`5`	Minute increment: 1, 5, 15, 30, or 60
`data-min-time`	String	-	Minimum selectable time (HH:mm format)
`data-max-time`	String	-	Maximum selectable time (HH:mm format)
`data-default-time`	String	-	Initial value. Use `now` for current time
`data-show-presets`	Boolean	`true`	Show quick preset buttons (Now, Morning, etc.)
`data-show-dial`	Boolean	`true`	Show clock dial (false = list-only mode)
`data-inline`	Boolean	`false`	Always visible (no popover)
`data-clearable`	Boolean	`true`	Show clear button in input
`data-close-on-select`	Boolean	`true`	Close picker after selection
`data-auto-apply`	Boolean	`true`	Auto-apply without confirm button
`data-required`	Boolean	`false`	Mark field as required
`data-disabled`	Boolean	`false`	Disable the picker
`data-placeholder`	String	`Select time`	Input placeholder text
`data-aria-label`	String	`Select time`	Accessible label for screen readers
`data-filterbus-publish`	String	-	FilterBus key for cross-component filtering

JavaScript API

Method	Parameters	Description
`RSL.TimePicker.init()`	-	Initialize all time pickers on the page
`RSL.TimePicker.create(element, options)`	element, options	Create a time picker on a specific element
`RSL.TimePicker.getValue(element)`	element	Get current value (HH:mm format)
`RSL.TimePicker.setValue(element, time)`	element, time	Set value programmatically
`RSL.TimePicker.open(element)`	element	Open the picker popover
`RSL.TimePicker.close(element)`	element	Close the picker popover
`RSL.TimePicker.clear(element)`	element	Clear the selected value
`RSL.TimePicker.destroy(element)`	element	Remove time picker and clean up

// Create programmatically
var input = document.querySelector('#appointment-time');
RSL.TimePicker.create(input, {
    format: '12',
    step: 15,
    minTime: '09:00',
    maxTime: '17:00',
    showPresets: true
});

// Get value
var time = RSL.TimePicker.getValue(input);
console.log(time); // "14:30"

// Set value
RSL.TimePicker.setValue(input, '09:30');

// Listen for changes
input.addEventListener('rsl-time-change', function(e) {
    console.log('Time selected:', e.detail.time);
    console.log('Formatted:', e.detail.formatted);
});

Events

Event	Detail	Description
`rsl-time-change`	`{ time, formatted, hours, minutes, period }`	Fired when time is selected/changed
`rsl-time-open`	-	Fired when picker opens
`rsl-time-close`	-	Fired when picker closes
`rsl-time-clear`	-	Fired when value is cleared

FilterBus Integration

The Time Picker integrates with RSL's FilterBus for cross-component communication, allowing time selections to filter data in tables and other components.

Publish-Only Component

The Time Picker publishes time selection to FilterBus. Other components (Smart Table, Charts, etc.) can subscribe to filter their data by time.

FilterBus Attribute

Attribute	Values	Description
`data-filterbus-publish`	Filter key (string)	Publishes time selection to FilterBus with the specified key.

Published Value Structure

The Time Picker publishes an object with the following structure:

// Time Picker publishes:
{
    time: '14:30',           // 24-hour format (HH:MM)
    formatted: '2:30 PM',    // Display format based on config
    mode: 'single'           // 'single' or 'range'
}

Usage Example

<!-- Time picker publishes to 'timeFilter' key -->
<input type="text"
       data-rsl-time-picker
       data-format="12"
       data-step="15"
       data-filterbus-publish="timeFilter">

Subscribing to Time Filter

Other components can subscribe to the time filter key to filter their data:

// Subscribe to time filter changes
RSL.FilterBus.subscribe('my-time-subscriber', function(state) {
    var timeData = state.timeFilter;
    if (!timeData) return;

    console.log('Selected time:', timeData.time);      // "14:30"
    console.log('Formatted:', timeData.formatted);     // "2:30 PM"

    // Filter your data based on time
    filterTableByTime(timeData.time);
}, { keys: ['timeFilter'] });

See Live Demo

View the FilterBus Demo page to see the Time Picker working with Smart Tables and other components.

Keyboard Navigation

Key	Action
`Enter` / `Space`	Open picker, confirm selection
`Escape`	Close picker without saving
`Tab`	Move focus between elements (trapped in popover)
`Arrow Up`	Increment current segment (hours/minutes)
`Arrow Down`	Decrement current segment
`Arrow Left`	Move to previous segment
`Arrow Right`	Move to next segment
`Home`	Jump to minimum time
`End`	Jump to maximum time
`Delete` / `Backspace`	Clear value (when clearable)

Accessibility

WCAG 2.1 AA Compliant: The Time Picker includes comprehensive accessibility features.

ARIA Labels: All interactive elements have descriptive labels
Live Regions: Screen reader announcements for selections and state changes
Focus Management: Focus is trapped within the popover and returns to input on close
High Contrast: Clear focus indicators with :focus-visible styles
Keyboard Only: Fully operable without a mouse
Reduced Motion: Respects prefers-reduced-motion media query

JSON Layout API V2 Integration

The Time Picker integrates with the JSON Layout API V2 for declarative, programmatic creation.

V2 Semantic Content Type

Use type: "timepicker" to create time pickers without writing HTML strings.

Basic Example

const config = {
    version: 2,
    layoutId: "meeting-scheduler",
    breakpoints: { xs: 1, md: 2 },
    items: [
        {
            content: {
                type: "card",
                title: "Meeting Time",
                customContent: {
                    type: "timepicker",
                    format: "12",
                    step: 15,
                    placeholder: "Select time...",
                    minTime: "09:00",
                    maxTime: "17:00"
                }
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#container', config);

V2 Configuration Options

Property	Type	Description
`format`	string	"12" or "24" - Time format
`step`	number	Minute increment (1, 5, 15, 30, 60)
`mode`	string	"single" or "range"
`placeholder`	string	Input placeholder text
`minTime`	string	Minimum time "HH:mm"
`maxTime`	string	Maximum time "HH:mm"
`defaultTime`	string	Initial time or "now"
`filterBusPublish`	string	FilterBus key for publishing
`onChange`	function	Callback: (event, value, instance)

See Full Examples

View Time Picker JSON API Examples for comprehensive demos including range mode, constraints, and FilterBus integration.

Next Steps

See Examples

View examples.html for comprehensive demos

Try the Playground

Test features in playground.html

Explore Components

Browse all RSL components