Skip to content
CroStreamUI kit

Dates & times

Picking when: a calendar, date and date-range pickers, and time fields, locale-aware and keyboard-first.

01Calendar

Calendar

A month grid for pointing at a day. Arrows move by day, PageUp and PageDown by month, Shift with them by year; the heading opens a month and year picker. Days that can't be picked say why, out loud and on screen.

Blackout dates Struck-through days can't be picked; focus one with the keyboard to hear and see the reason. Past days are out of range.
Sunday Monday Tuesday Wednesday Thursday Friday Saturday
27
28
29
30
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
31
1
2
3
4
5
6
7

Picked: Mon, Oct 19, 2026

Week numbers ISO-8601 weeks in the first column.
Week Monday Tuesday Wednesday Thursday Friday Saturday Sunday
Week40
28
29
30
1
2
3
4
Week41
5
6
7
8
9
10
11
Week42
12
13
14
15
16
17
18
Week43
19
20
21
22
23
24
25
Week44
26
27
28
29
30
31
1
Week45
2
3
4
5
6
7
8

Two months, range RangeCalendar inline: pick a start, then an end; the band previews as you move. Months wrap on narrow screens.
Sunday Monday Tuesday Wednesday Thursday Friday Saturday
27
28
29
30
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
31
1
2
3
4
5
6
7
Sunday Monday Tuesday Wednesday Thursday Friday Saturday
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
6
7
8
9
10
11
12

Oct 15 – 21, 2026 · 7 days

Locales The first day of the week, month names and day labels follow the locale.

en-US · Sunday first

Sunday Monday Tuesday Wednesday Thursday Friday Saturday
27
28
29
30
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
31
1
2
3
4
5
6
7

en-GB · Monday first

Monday Tuesday Wednesday Thursday Friday Saturday Sunday
28
29
30
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
31
1
2
3
4
5
6
7
8

de-DE · Montag zuerst

Montag Dienstag Mittwoch Donnerstag Freitag Samstag Sonntag
28
29
30
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
31
1
2
3
4
5
6
7
8

02DatePicker

DatePicker

Type a date part by part, or open the calendar and point. Inside a Field it takes the label, hint, error and required state with no extra props.

Schedule a stream reminder A DatePicker with quick picks beside a TimeField that steps in 15 minutes. Past days are out of range.
10192026

Chat gets a heads-up the day before.

0730PM

Reminder set for Mon, Oct 19, 2026 at 7:30 PM

Required, with an error Press Save with nothing picked: the error is announced and wired to the first segment.
mmddyyyy
States Read-only keeps the value selectable; disabled is outlined, not faded.
10062026
10062026
Sizes and locale Small, medium and large; German day-month-year order.
Small date
10182026
Medium date
10182026
Large date
10182026
Datum
18102026
Compact density The app's working density: same field, tighter well.
10192026
0730PM

03DateRangePicker

DateRangePicker

Two typed dates, start and end, with a range calendar: pick the start, then the end, and the band previews in between. Quick ranges fill both ends at once.

History from … to … Quick ranges beside two months; ranges are capped at 90 days and can't run into the future.
start end

Up to 90 days at a time.

Oct 12 – 18, 2026 · 7 days

Empty, one month No presets; one month even on wide screens.
start end
Error An invalid range keeps its typed parts and says what's wrong.
start end

The end is before the start.

04TimeField

TimeField

A typed time: hour, minute and, where the locale uses one, AM/PM. Arrow keys change the part you're on; with a step the minutes snap to it.

12 and 24 hours The clock follows the locale unless you set hourCycle.
0730PM
1930

7:30 PM · 19:30

Steps and seconds Minutes jump by 15 (20:07 ↑ → 20:15); seconds for short timers.
2007
000230

Hours, minutes and seconds.

Range and states A stream window; an out-of-range time is marked invalid.
start end
0315AM

Pick a time after 6 PM.

1200PM

05WeekdayPicker

WeekdayPicker

Which days of the week. Seven toggle buttons in a labelled group, in the locale's week order, with optional shortcuts for every day, weekdays and weekends. The value is a plain list of day keys, read as a set.

With presets The shortcut that matches the current choice is pressed. Selecting nothing is the caller's to interpret.

Every day when none is chosen.

mon, wed, fri
Compact, Monday first size sm for tight rows; weekStart overrides the locale.
Invalid The error edge, with the message from the Field.

Pick at least one day.

Disabled Dashed edges in High contrast.