Skip to content
Design System
العربية

Dates and times

import"@truvar-ai/design-system"

Dates and times

Date order, numerals, first day of the week and weekends all follow the reader's locale. Switch to Arabic to see Saturday-first weeks and Friday–Saturday weekends.

Date field

Built on DateField

Type each part, or use arrow keys to change it.

Contract start
1122026

Time field

Built on TimeField

Daily digest at
900AM

Date picker

Built on DatePicker + Calendar

Weekends are unavailable in this example. Weekends, date order and numerals follow the reader's locale.

Send report on
Reports go out at 9:00 your time.

Date range picker

Built on DateRangePicker

Report period

Calendar

Built on Calendar

Meeting date, November 2026

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5

Month and year pickers

Built on CalendarMonthPicker + CalendarYearPicker

Jump straight to a month or year instead of clicking the arrows, useful for birth dates and contract history.

Contract signed, November 2024

27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Range calendar

Built on RangeCalendar

Campaign dates, November 2026

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5