---
id: formatting
title: Formatting
---

> Discover how to format the content of DayPicker elements.

Use [formatting props](./api/daypicker#formatting-props) to format the content of the day
cell, the month’s caption, the weekday name or the week’s number.

* For more advanced customization of those elements, see [custom components](./custom-components.mdx).
* Formatting props can be used for [localization](./localization.mdx).

```jsx preview
import React, { useState } from 'react';
import { DayPicker } from 'react-day-picker';
import { format } from 'date-fns';

function App() {
  // Add a "pin" emoji when the date is the 12th or the 17h of the month
  const formatDay = day => {
    const isPinned = (day.getDate() === 12 ||  day.getDate() === 17);
    const pin = isPinned ? '📌' : '';
    return `${day.getDate()}${pin}`;
  };

  const formatCaption = (month, { locale }) => {
    return `${format(month, 'dd/yyyy', { locale })}`;
  };

  const formatWeekdayName = (day, { locale }) => {
    return format(day, 'E', { locale })[0];
  };

  return (
    <DayPicker
      showOutsideDays
      showWeekNumber
      formatDay={formatDay}
      formatCaption={formatCaption}
      formatWeekdayName={formatWeekdayName}
    />
  );
}
```
