Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Time picker

Time picker allows the user to select a specfic time value.

last modified: 08/06/2022 11:20:05

Overview

Time picker allows users to enter a specific time value.


Anatomy

  1. Text field
    This is the default text field of the Design System. Anatomy details available in text field article.
  2. Helper text
    The helper text is part of the text field. In this specific case, the helper text is mandatory to cleary indicate the requested format to the user.
  3. Action icon
    The action icon is part of the text field. In this specific case, the action icon is mandatory to cleary indicate to the user the field type and also allows him to select the hour and minute value from the select popup.
  4. Select popup
    Select popup allows the user to select the hour or minute value. It's triggered by clicking on the field or on the action icon.
  5. Valid state

Behaviour

Selecting time

There are two primary methods for selecting time:

  • Type in a specific value in the text field.
  • Select the hour or minute value from the select popup.

Optional vs. mandatory

All fields in a form are assumed required, if the time picker optional in yours, this field has to be tagged as so in the label.


Related elements

Date picker

Date picker allows the user to select a date or a range of dates.

More info about Date picker

last modified: 08/09/2022 10:20:06
Accessibility
  • The input must have a helper with an exemple of value and the available timetable. See text fields with helper text accessibility.
  • Hours list must have an aria-label="Hours list" translated in each language.
  • Minutes list must have an aria-label="Minutes list" translated in each language.
  • rs-timepicker-icon must have:
    • aria-label="Open the popup to choose a time slot" attribute, translated in each language
    • role="button" attribute to inform users they are on a button.
    • tabindex="0" attribute to allow focus with keyboard.
How does it work

Time picker is a webcomponent which needs data-rslib-webcomponent-load="rslib.apps.timepicker" attribute to work.

Razor

All @rsTimepicker objects can receive all following optionnal parameters:

Name Purpose Default value
inputId Id "ac-timeInput"
inputPh Placholder "Choose your time"
inputLabel Label "Choose a time slot (optional)"
isFilled The field is prefilled false
helperTxt Helper text below the field.
You can have multiple helpers by separating them with a "," (ex:"Hours available are between 8 and 18, This is an error message, This is a success message").
"ex: 09:25 (Hours available are between 8 and 18)"
helperType Helper type.
For multiple helpers, just separate them with a ",". (default, rs-form-error,...)
"default"
firstHour From which hour? 8
lastHour To which hour? 18
defaultSelectedHour Selected hour (if isFilled=true) 1
defaultSelectedMinutes Selected minutes (if isFilled=true) 1
sXtraClass Extra class ""
bDisabled Disabled the element false

Standard time picker

The select popup is stocked inside a rs-timepicker-popup . Each list inside rs-timepicker-popup must have a data attribute. data-hours for the hours list and data-minutes for the minutes list.

ex: 09:25 (Hours available are between 8 and 18)
08
09
10
11
12
13
14
15
16
17
18
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

Disabled time picker

ex: 09:25 (Hours available are between 8 and 18)
08
09
10
11
12
13
14
15
16
17
18
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

Negative version

Like every forms element, you must put rs-form-neg on the form tag to have negative version.

ex: 09:25 (Hours available are between 8 and 18)
08
09
10
11
12
13
14
15
16
17
18
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

JavaScript

How to trigger the js

As Time picker is a webcomponent, you will have to load inception.webComponentLoad(CONTEXT); first to be able to load the scripts.

Next time you add Time picker to the page, you have to call this JS: inception.timepicker(CONTEXT);

CONTEXT refers to document or html element parent.

last modified: 16/09/2022 12:45:14

Configuration metadata

Selector: lib-time-picker

Class: TimePickerComponent

Use case example

NOT AVAILABLE LIVE PREVIEW

Inputs

Name Type Default Required Description
iconAriaLabel string Open the popup to choose a time slot No Accessibility label for the icon
hoursAriaLabel string Hours list No Accessibility label for the list of hours
minutesAriaLabel string Minutes list No Accessibility label for the list of minutes

Outputs

None

Models

None