Formatters
Use the formatters to change the default format for the day, the weekday name, etc.
Formatters can be useful for a custom localization.
Example: add emoji to the calendar
The following example add some emoji to the caption and to the day cells.
import React from 'react';
import { format } from 'date-fns';
import { DateFormatter, DayPicker } from 'react-day-picker';
const seasonEmoji: Record<string, string> = {
winter: '⛄️',
spring: '🌸',
summer: '🌻',
autumn: '🍂'
};
const getSeason = (month: Date): string => {
const monthNumber = month.getMonth();
if (monthNumber >= 0 && monthNumber < 3) return 'winter';
if (monthNumber >= 3 && monthNumber < 6) return 'spring';
if (monthNumber >= 6 && monthNumber < 9) return 'summer';
else return 'autumn';
};
const formatCaption: DateFormatter = (month, options) => {
const season = getSeason(month);
return (
<>
<span role="img" aria-label={season}>
{seasonEmoji[season]}
</span>{' '}
{format(month, 'LLLL', { locale: options?.locale })}
</>
);
};
export default function App() {
return (
<DayPicker fromYear={2020} toYear={2025} formatters={{ formatCaption }} />
);
}
🍂 October
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
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 |