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: 20/03/2024 15:00:14
Accessibility

The input must have a helper with an exemple of value and the available timetable. See text fields with helper text accessibility.

How does it work

This timepicker is an input "time" all info can be found on developer mozilla.

Razor

This component is generated using the formField.cshtml include from the text fields section.

By passing the paramaeter type to time , it will automatically be a timepicker.

You still need to add the correct helper / id / etc. by yourself.

It's also very important to add the "pattern" on the inputXtraParameters , to specify to the timepicker to not wait for the "second".

Standard time picker

ex: 09:25 (Hours available are between 8 and 18)
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)

Error time picker

This is an error message

Success time picker

Valid field

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)

Deprecated

EXPIRY DATE: ?

The custom timepicker that needed js below is not accessible and should no longer be used.
This element will no longer be available from the expiry date meaning the related css will be removed and the element design will be broken if it's not adapted to the new html.

Class rs-timepicker

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
last modified: 28/02/2024 15:30:08

Configuration metadata

Selector: ds-time-picker

Class: DSTimePickerComponent

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