Skip to main content

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 { DateFormatter, DayPicker } from 'react-day-picker';

import { format } from 'date-fns';

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 }} />
  );
}