use-date-input - Build Your Own Date Picker
Getting StartedStateThemingCompositionDate FrameworksLocalizationFormat NamesDate-fns with a Russian localeDayjs with a Chinese localeLuxon with a French localeMoment with a Spanish locale
Components
Hooks
AnimatedGroupAnimatedMonthGroupCalendarCalendarProviderClickOutsideDayDayOfWeekHeaderHomeMonthMonthGroupPopperRootWeekWeekHeaderuseCalendarDispatchuseCalendarPropsuseCalendarStateuseDateAPIuseDateInputuseDateRangeInput

Localization

Localization is provided by adding a format callback to your date adapter.

The format function uses the date frameworks' localization to format dates.

The signature of format is

format(date, formatName)
  • date is the date object to format
  • formatName is an enum for the required format

Format Names

For convenience the format names can be imported from @use-date-input/core

import { formatNames } from `@use-date-input/core`

The full list of formatName values

Format NameDescriptionExample
ARIA_DAY_LABELReturns aria label for day component6th August 2020
ARIA_START_LABELReturns aria label for start of rangeSelected 15th September 2020 as start date
ARIA_END_LABELReturns aria label for end of rangeSelected 15th September 2020 as end date
ISOReturns date in ISO format2020-01-17
HEADERReturns header label2020
DAYReturns day label17
DAY_OF_WEEK_FULLReturns day of week full labelMonday
DAY_OF_WEEK_ABBREVIATEDReturns day of week short labelMo
MONTHReturns month index1
MONTH_ABBREVIATEDReturns month short labelJan
MONTH_FULLReturns month full labelJanuary
YEARReturns year2020

To change the text returned for a locale or to customize the labels, modify the default `format function provided by your adapter.

Date-fns with a Russian locale

As shown here, where we use date-dns to create a Russian calendar.

2021
июня
вс
пн
вт
ср
чт
пт
сб
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910
июля
вс
пн
вт
ср
чт
пт
сб
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567
августа
вс
пн
вт
ср
чт
пт
сб
1234567
891011121314
15161718192021
22232425262728
2930311234
567891011
сентября
вс
пн
вт
ср
чт
пт
сб
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
октября
вс
пн
вт
ср
чт
пт
сб
262728293012
3456789
10111213141516
17181920212223
24252627282930
31123456
ноября
вс
пн
вт
ср
чт
пт
сб
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011
декабря
вс
пн
вт
ср
чт
пт
сб
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678
января
вс
пн
вт
ср
чт
пт
сб
2627282930311
2345678
9101112131415
16171819202122
23242526272829
303112345
февраля
вс
пн
вт
ср
чт
пт
сб
303112345
6789101112
13141516171819
20212223242526
272812345
6789101112
марта
вс
пн
вт
ср
чт
пт
сб
272812345
6789101112
13141516171819
20212223242526
272829303112
3456789
апреля
вс
пн
вт
ср
чт
пт
сб
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567
мая
вс
пн
вт
ср
чт
пт
сб
1234567
891011121314
15161718192021
22232425262728
2930311234
567891011

Dayjs with a Chinese locale

2021
六月
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011
七月
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678
八月
2627282930311
2345678
9101112131415
16171819202122
23242526272829
303112345
九月
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910
十月
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567
十一月
1234567
891011121314
15161718192021
22232425262728
293012345
6789101112
十二月
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
一月
272829303112
3456789
10111213141516
17181920212223
24252627282930
31123456
二月
31123456
78910111213
14151617181920
21222324252627
28123456
78910111213
三月
28123456
78910111213
14151617181920
21222324252627
28293031123
45678910
四月
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678
五月
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345

Luxon with a French locale

2021
June
M
T
W
T
F
S
S
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011
July
M
T
W
T
F
S
S
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678
August
M
T
W
T
F
S
S
2627282930311
2345678
9101112131415
16171819202122
23242526272829
303112345
September
M
T
W
T
F
S
S
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910
October
M
T
W
T
F
S
S
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567
November
M
T
W
T
F
S
S
1234567
891011121314
15161718192021
22232425262728
293012345
6789101112
December
M
T
W
T
F
S
S
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
January
M
T
W
T
F
S
S
272829303112
3456789
10111213141516
17181920212223
24252627282930
31123456
February
M
T
W
T
F
S
S
31123456
78910111213
14151617181920
21222324252627
28123456
78910111213
March
M
T
W
T
F
S
S
28123456
78910111213
14151617181920
21222324252627
28293031123
45678910
April
M
T
W
T
F
S
S
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678
May
M
T
W
T
F
S
S
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345

Moment with a Spanish locale

2021
junio
lu
ma
mi
ju
vi
do
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011
julio
lu
ma
mi
ju
vi
do
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678
agosto
lu
ma
mi
ju
vi
do
2627282930311
2345678
9101112131415
16171819202122
23242526272829
303112345
septiembre
lu
ma
mi
ju
vi
do
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910
octubre
lu
ma
mi
ju
vi
do
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567
noviembre
lu
ma
mi
ju
vi
do
1234567
891011121314
15161718192021
22232425262728
293012345
6789101112
diciembre
lu
ma
mi
ju
vi
do
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
enero
lu
ma
mi
ju
vi
do
272829303112
3456789
10111213141516
17181920212223
24252627282930
31123456
febrero
lu
ma
mi
ju
vi
do
31123456
78910111213
14151617181920
21222324252627
28123456
78910111213
marzo
lu
ma
mi
ju
vi
do
28123456
78910111213
14151617181920
21222324252627
28293031123
45678910
abril
lu
ma
mi
ju
vi
do
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678
mayo
lu
ma
mi
ju
vi
do
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345