Time Picker Playground

Raw examples of the RSL Time Picker component. This file contains no dependencies beyond the essential RSL styles and scripts.

Basic Usage

The simplest implementation

Time Formats

data-format="12"
data-format="24"

Step Intervals

data-step="5"
data-step="15"
data-step="30"
data-step="60"

Time Range Constraints

data-min-time="09:00" data-max-time="17:00"
data-min-time="18:00" data-max-time="23:00"

Quick Presets

data-show-presets="true"
data-show-presets="false"

Display Modes

data-show-dial="true"
data-show-dial="false"

Programmatic Control

Click a button to interact with the time picker

Event Handling

Events will appear here...