Date Picker

v0.0.1
Fast, unstyled, keyboard accessible date picker for React.
vuukasin/chrono-select
May 2025
Mo
Tu
We
Th
Fr
Sa
Su
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
June 2025
Mo
Tu
We
Th
Fr
Sa
Su
26
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
1
2
3
4
5
6

Introduction

The Date Picker is designed with a focus on both simplicity and flexibility. It is delivered unstyled to allow for extensive customization and supports full keyboard accessibility. Additionally, it is lightweight, with asize of only 14kb and does not rely on any external dependencies.

Component requires the selected and onSelectedChange properties to function. The type of the selected property is determined by the mode property, which defaults to 'single'. In 'range' mode, it is necessary to manage an array containing no more than two values.

The Date Picker is fully customizable, enabling you to build your components from scratch. For further details please visit examples page.

API Reference

mode
single | range | multiple
single
moveFocusBehavior
change | loop | none
change
startOfWeek
number
1
fixedWeeks
boolean
false
monthCount
number
1
minDate
Date
--
maxDate
Date
--
weekdays
short | long
--
headingFormat
string
MMMM YYYY
lastMonthControl
boolean
false
selected
Date | Date[]
--
onSelectedChange
function
--
initialFocus
Date
--

Parts

All parts forward props, including ref, to an appropriate element. Each part has a specific data-attribute (starting with date-picker) that can be used for styling.

DatePicker.Root [date-picker-root]

DatePicker.Root provides a context wrapper for the date picker. Root accepts all the mentioned properties from API references and forwards them to the appropriate elements.

DatePicker.MonthsWrapper [date-picker-months-wrapper]

The DatePicker.MonthsWrapper component is specifically designed for displaying months within the user interface. It is distinctively separated as an individual component to enhance compatibility and ease of layout arrangements with built-in components or additional custom components.

DatePicker.PrevMonthTrigger [date-picker-prev-month-control]

PrevMonthTrigger is a control component that modifies the displayed month(s) by shifting it back by one month.

DatePicker.NextMonthTrigger [date-picker-next-month-control]

NextMonthTrigger is a control component that modifies the displayed month(s), moving it foward by one month. Buttons will be disabled in case the rendered month(s) have reached min/max date. If you want to allow changing the month(s) beyond the min/max date, you should create your own control buttons with useStore hook.

Styling

When creating custom components for your date picker, such as this example, you can apply styles using classNames. Alternativly, styles can be applied by targeting the data attributes.

[date-picker-root] - The root element of the date picker.

[date-picker-months-wrapper]- Used to style the months wrapper, and customize the layout of the months.

[date-picker-month-days]- Used to create a custom layout for the days of the month. Most of the time, you will use the grid layout to create a week view.



[date-picker-month-days] {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

[date-picker-day]- Used to style the day element. You can use this in combination with the data-attributes like [data-focused="true"], [data-selected="true"], [data-range="true"], [data-weekend="true"] and [data-disabled="true"]

[date-picker-control-buttons]- Use to style the control buttons of the date picker, when control buttons are added via property lastMonthControl.

[date-picker-prev-month-control] and [date-picker-next-month-control] are used to style the prev/next month triggers, [data-disabled="true"] is also available.