Skip Navigation

Time Selection

Time Selection components allow users to specify a time, timeframe or range of time (beginning and end).

Available in React

Standard Time Select

There are several controls for capturing a single time. A select input is the most common:


When to Use

  • Use this variation when a limited set of times is available. For instance, even and uneven time increments or timeframes (morning, afternoon, etc.).

When Not to Use

  • Do not use when the user is likely to want to specify an exact time, such as 11:48 a.m. A Time Text Input would be preferred.

Examples

Examples

Time Range Slider


When to Use

  • To select a beginning and end time.
  • To indicate a minimum and maximum time value.
  • Recommended for touch displays.

When Not to Use

  • Do not use for fine/exact time selection.

Time Range Select Input

The Time Range Select provides similar functionality as the Time Range Slider, but it is better suited to applications in which the user is more likely to be using a keyboard.


Time Text Input


When to Use

  • When a user can specify an exact time (for example, 10:42 a.m.) or select from a list of time increments.

When Not to Use

  • Not recommended for touch applications.

Developer Notes

Single Time Select and Time Range Select Input

The Single Time Select and Time Range Select components are a reuse of the Select Input component. Refer to the Select Input component documentation for details on setup and configurations.

Time Range Slider

Use of the Time Range Slider requires a JavaScript helper. It can be instantiated using new Spark.TimeRangeSlider(el). It implements the Messaging and Validation mixins, and provides mechanisms for getting and setting the value.

The following options may be passed when using new Spark.TimeRangeSlider(el, {});:

Name Type Default Description
timeFormat String '12' The time format used by the inputs. This can be '12' for 12-hour clock format, or '24' for 24-hour clock format. If not passed, it will be parsed from the `data-time-format` attribute on the `.spark-time-range-slider` element if it is present.
customAriaLabels Array null An array of objects containing labels to be used for the aria-label attribute on individual hour, minute and period fields. The object structure is: {hourAriaLabel: "Text for hour aria-label", minuteAriaLabel: "Text for minute aria-label", periodAriaLabel: "Text for period aria-label"}. The periodAriaLabel is not necessary if using the 24-hour clock format.
validate function null A function to run to validate the state of the input. It should call onValidate with the parameters outlined below.
onValidate function null A callback function run after validation has completed. Callback arguments are isValid, newValue, instance.
onChange function null A callback function run when the input value changes. Callback arguments are newValue, instance.

For all available methods and full API, refer to the Time Range Slider API documentation.

HTML Attribute Configurations

The following attributes/configurations should be set on the Time Inputs’ markup to set the default positions of the Time Range Slider handles and the width of the range for each handle:

Attribute Name Example Description
min min="08:00" The minimum time allowed in the range. This should be in 24-hour format.
max max="20:00" The maximum time allowed in the range. This should be in 24-hour format.
value value="14:00" The default position of the handle. This should be in 24-hour format. If not provided will default to the min value.
step step="60" The step interval used in the range. Should be one of 1, 5, 10, 15, 30, 60.

12-hour Time Range Slider

<div class="row">
  <div class="col-xs-12 col-lg-6 col-xl-4 spark-center-block">
    <div class="spark-time-range-slider">
      <label class="spark-label">Slider Label</label>

      <label class="spark-time spark-input">
        <input data-range="min" type="time" min="06:00" max="18:00" value="07:00" step="60" title="Start" id="spark-time-range-slider-1" />
        <span class="spark-label">Please enter a time</span>
      </label>

      <span class="spark-time-range-slider__input-divider"></span>

      <label class="spark-time spark-input">
        <input data-range="max" type="time" min="07:00" max="19:00" value="18:00" step="60" title="End" id="spark-time-range-slider-2" />
        <span class="spark-label">Please enter a time</span>
      </label>

      <div class="spark-slider__controls">
        <button class="spark-slider__handle" title="Start" role="slider" aria-label="Set start time" aria-controls="spark-time-range-slider-1" aria-valuemin="06:00 a.m." aria-valuemax="06:00 p.m." aria-valuenow="07:00 a.m." aria-valuetext="07:00 a.m."></button>
        <button class="spark-slider__handle" title="End" role="slider" aria-label="Set end time" aria-controls="spark-time-range-slider-2" aria-valuemin="08:00 a.m." aria-valuemax="07:00 p.m." aria-valuenow="06:00 p.m." aria-valuetext="06:00 p.m."></button>
        <span class="spark-slider__track">
          <span class="spark-slider__track-fill"></span>
        </span>
      </div>
    </div>
  </div>
</div>


<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-time-range-slider');
var sliderInstance = new Spark.TimeRangeSlider(el);

24-hour Time Range Slider

<div class="row">
  <div class="col-xs-12 col-lg-6 col-xl-4 spark-center-block">
    <div class="spark-time-range-slider" data-time-format="24">
      <label class="spark-label">Slider Label</label>

      <label class="spark-time spark-input">
        <input data-range="min" type="time" min="08:00" max="16:00" value="09:00" step="60" title="Start" id="spark-time-range-slider-3" />
        <span class="spark-label" id="time-text-label-start">Please enter a time</span>
      </label>

      <span class="spark-time-range-slider__input-divider"></span>

      <label class="spark-time spark-input">
        <input data-range="max" type="time" min="09:00" max="17:00" value="13:00" step="60" title="End" id="spark-time-range-slider-4" />
        <span class="spark-label" id="time-text-label-end">Please enter a time</span>
      </label>

      <div class="spark-slider__controls">
        <button class="spark-slider__handle" title="Start" role="slider" aria-label="Set start time" aria-controls="spark-time-range-slider-3" aria-valuemin="08:00" aria-valuemax="16:00" aria-valuenow="09:00" aria-valuetext="09:00"></button>
        <button class="spark-slider__handle" title="End" role="slider" aria-label="Set end time" aria-controls="spark-time-range-slider-4" aria-valuemin="09:00" aria-valuemax="17:00" aria-valuenow="13:00" aria-valuetext="13:00"></button>
        <span class="spark-slider__track">
          <span class="spark-slider__track-fill"></span>
        </span>
      </div>
    </div>
  </div>
</div>


<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-time-range-slider');
var sliderInstance = new Spark.TimeRangeSlider(el);

Disabled Time Range Slider

<div class="row">
  <div class="col-xs-12 col-lg-6 col-xl-4 spark-center-block">
    <div class="spark-time-range-slider example-disabled">
      <label class="spark-label">Slider Label</label>

      <label class="spark-time spark-input">
        <input data-range="min" type="time" min="06:00" max="18:00" value="07:00" step="60" title="Start" id="spark-time-range-slider-5" />
        <span class="spark-label" id="time-text-label-start">Please enter a time</span>
      </label>

      <span class="spark-time-range-slider__input-divider"></span>

      <label class="spark-time spark-input">
        <input data-range="max" type="time" min="07:00" max="19:00" value="18:00" step="60" title="End" id="spark-time-range-slider-6" />
        <span class="spark-label" id="time-text-label-end">Please enter a time</span>
      </label>

      <div class="spark-slider__controls">
        <button class="spark-slider__handle" title="Start" role="slider" aria-label="Set start time" aria-controls="spark-time-range-slider-5" aria-valuemin="06:00 a.m." aria-valuemax="06:00 p.m." aria-valuenow="07:00 a.m." aria-valuetext="07:00 a.m."></button>
        <button class="spark-slider__handle" title="End" role="slider" aria-label="Set end time" aria-controls="spark-time-range-slider-6" aria-valuemin="08:00 a.m." aria-valuemax="07:00 p.m." aria-valuenow="06:00 p.m." aria-valuetext="06:00 p.m."></button>
        <span class="spark-slider__track">
          <span class="spark-slider__track-fill"></span>
        </span>
      </div>
    </div>
  </div>
</div>


<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-time-range-slider');
var sliderInstance = new Spark.TimeRangeSlider(el);

Time Text Input

Use of the Time Text Input requires a JavaScript helper. It can be instantiated using new Spark.TimeTextInput(el). It implements the Messaging and Validation mixins, and provides mechanisms for getting and setting the value.

The following options may be passed when using new Spark.TimeTextInput(el, {});:

Name Type Default Description
timeFormat string '12' The time format used by the input. If not passed, it will be parsed from thedata-time-format attribute on theinput element if it is present.
hourAriaLabel string 'Please enter hour' The aria-label value to be used on the hour input field.
minuteAriaLabel string 'Please enter minute' The aria-label to be used on the minute input field.
periodAriaLabel string 'Please enter a.m. or p.m.' The aria-label to be used on the period input field if using the 12-hour clock format.
validate function null A function to run to validate the state of the input. It should call onValidate with the parameters outlined below.
onValidate function null A callback function run after validation has completed. Callback arguments are isValid, newValue, instance.
onChange function null A callback function run when the input value changes. Callback arguments are newValue, instance.
onFocus function null A callback function run when the input gains focus. Callback arguments are newValue, instance.
onBlur function null A callback function run when the input loses focus. Callback arguments are newValue, instance.

For all available methods and full API, refer to the Time Text Input API documentation.

12-hour Time Text Input

<div class="row">
  <div class="col-sm-12 col-md-8 col-xl-6 spark-center-block">
    <label class="spark-time spark-input">
      <input class="spark-input__field" type="time" />
      <span class="spark-label">Please enter a time</span>
    </label>
  </div>
</div>


<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-time');
var inst = new Spark.TimeInput(el);

24-hour Time Text Input

<div class="row">
  <div class="col-sm-12 col-md-8 col-xl-6 spark-center-block">
    <label class="spark-time spark-input">
      <input class="spark-input__field" type="time" data-time-format="24" />
      <span class="spark-label">Please enter a time</span>
    </label>
  </div>
</div>


<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-time');
var inst = new Spark.TimeInput(el);

Time Text Input with Preset Value

<div class="row">
  <div class="col-sm-12 col-md-8 col-xl-6 spark-center-block">
    <label class="spark-time spark-input">
      <input class="spark-input__field" type="time" value="13:58" />
      <span class="spark-label">Please enter a time</span>
    </label>
  </div>
</div>


<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-time');
var inst = new Spark.TimeInput(el);

When using a Time Text Input with a preset value, ensure that the value is set in 24-hour format.

Disabled Time Text Input

<div class="row">
  <div class="col-sm-12 col-md-8 col-xl-6 spark-center-block">
    <label class="spark-time spark-input example-disabled">
      <input class="spark-input__field" type="time" />
      <span class="spark-label">Please enter a time</span>
    </label>
  </div>
</div>


<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-time');
var inst = new Spark.TimeInput(el);

Time Text Input with Error

<div class="row">
  <div class="col-sm-12 col-md-8 col-xl-6 spark-center-block">
    <label class="spark-time spark-input" data-error>
      <input class="spark-input__field" type="time" />
      <span class="spark-label">Departure time</span>
      <span class="spark-input__message">Please enter your departure time</span>
    </label>
  </div>
</div>


<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-time');
var inst = new Spark.TimeInput(el);

Accessibility Notes

Time Range Slider

Each input should have an id attribute set with a unique value on the page. The value of this attribute will be used as the value of the aria-controls property that is set on the corresponding Time Range Slider.

The following attributes and properties should be set on the spark-slider__handle elements to ensure that assistive technologies are able to identify the component appropriately and provide meaningful information to users.

  • An ARIA role="slider" should be set to identify the element as a slider, as this element is the operable control that represents the value of the slider.
  • The aria-orientation property is an optional attribute that can be set on a Time Range Slider handle. The default value of this property if not explicitly defined is horizontal. A value of vertical is also acceptable if your slider is vertical in nature. Keep in mind that a vertical variation of the Time Range Slider is not provided within Spark.
  • Use the aria-valuemin and aria-valuemax attributes to indicate to assistive technologies what the minimum and maximum values of the Time Range Slider are. The values set should match min and max values set on the Time Range Slider.
  • Use the aria-valuenow and aria-valuetext attributes to indicate to assistive technologies what the current value of the Time Range Slider is. When changed by the user, Javascript will be used to update the attributes with the new values.
  • If a Time Range Slider is disabled, ensure that the disabled attribute is present on the input element, and that the tabindex="-1" attribute and value are set on the Time Range Slider handle. If the Time Range Slider is programmatically disabled or enabled, these attributes will be set or removed using Javascript.
  • An aria-label property should be set as a text value is not provided on the button element.
  • An aria-controls property with a value matching the id of the associated input as already mentioned above.