Calendar
calendar-date-picker-01
November 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
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 |
28 components
Date picker
Redrawn from the Origin UI catalogue on Ndeko UI primitives. Open the code of any of them to copy it or the command that installs it.
Range calendar
calendar-date-picker-02
November 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
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 |
Calendar with unavailable dates
calendar-date-picker-03
November 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
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 |
Day picker calendar
calendar-date-picker-04
November 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Day picker range
calendar-date-picker-05
November 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Range with closed days
calendar-date-picker-06
November 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Multiple days
calendar-date-picker-07
November 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Round picked day
calendar-date-picker-08
November 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Round range ends
calendar-date-picker-09
November 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Navigation on the right
calendar-date-picker-10
November 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Month and year selects
calendar-date-picker-11
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Year select with arrows
calendar-date-picker-12
November
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Week numbers
calendar-date-picker-13
November 2026
| Su | Mo | Tu | We | Th | Fr | Sa | |
|---|---|---|---|---|---|---|---|
| 45 | |||||||
| 46 | |||||||
| 47 | |||||||
| 48 | |||||||
| 49 | |||||||
| 50 |
Back to the current month
calendar-date-picker-14
October 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Jump to today
calendar-date-picker-15
October 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Calendar with date field
calendar-date-picker-16
November 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Calendar with time field
calendar-date-picker-17
November 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Month and year view
calendar-date-picker-18
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Appointment picker
calendar-date-picker-19
November 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Calendar with presets
calendar-date-picker-20
November 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Range with presets
calendar-date-picker-21
November 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Two months
calendar-date-picker-22
November 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
December 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Three months
calendar-date-picker-23
November 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
December 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
January 2027
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Pricing calendar
calendar-date-picker-24
November 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
December 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Date picker
calendar-date-picker-25
Date picker
mmddyyyy
Date range picker
calendar-date-picker-26
Date range picker
mmddyyyy
mmddyyyy
Popover date picker
calendar-date-picker-27
Popover range picker
calendar-date-picker-28