Skip to main content

Formatters

Use the formatters to change the default format for the day, the weekday name, etc.

Example: add emoji to the calendar#

The following example add some emoji to the caption and to the day cells.

import * as React from 'react';
import { format } from 'date-fns';
import { DateFormatter, DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
const seasonEmoji = {
winter: (
<span role="img" aria-label="A snowman">
โ›„๏ธ
</span>
),
spring: (
<span role="img" aria-label="A spring flower">
๐ŸŒธ
</span>
),
summer: (
<span role="img" aria-label="A summer flower">
๐ŸŒป
</span>
),
autumn: (
<span role="img" aria-label="Autumn Leafs">
๐Ÿ‚
</span>
)
};
export default function Example() {
// Remove year from the caption
const formatCaption: DateFormatter = (month, { locale }) => {
let season = '';
if (month.getMonth() >= 0 && month.getMonth() < 3) {
season = 'winter';
} else if (month.getMonth() >= 3 && month.getMonth() < 6) {
season = 'spring';
} else if (month.getMonth() >= 6 && month.getMonth() < 9) {
season = 'summer';
} else if (month.getMonth() >= 9 && month.getMonth() < 12) {
season = 'autumn';
}
return (
<>
{seasonEmoji[season]} {format(month, 'LLLL', { locale })}
</>
);
};
const formatDay: DateFormatter = (day) => {
const date = day.getDate();
if (date === 12 || date === 17) {
return (
<span role="img" aria-label="Present">
๐ŸŽ
</span>
);
}
return `${date}`;
};
return (
<DayPicker
fromYear={2020}
toYear={2025}
formatters={{ formatDay, formatCaption }}
/>
);
}
Output
โ›„๏ธ March
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
1st March (Monday)
2nd March (Tuesday)
3rd March (Wednesday)
4th March (Thursday)
5th March (Friday)
6th March (Saturday)
7th March (Sunday)
8th March (Monday)
9th March (Tuesday)
10th March (Wednesday)
11th March (Thursday)
12th March (Friday)
13th March (Saturday)
14th March (Sunday)
15th March (Monday)
16th March (Tuesday)
17th March (Wednesday)
18th March (Thursday)
19th March (Friday)
20th March (Saturday)
21st March (Sunday)
22nd March (Monday)
23rd March (Tuesday)
24th March (Wednesday)
25th March (Thursday)
26th March (Friday)
27th March (Saturday)
28th March (Sunday)
29th March (Monday)
30th March (Tuesday)
31st March (Wednesday)