Advanced Features

You can also access advanced features, such as applying a different language or customizing your shortcuts.

Configs Shortcuts & Footer

Use the shortcuts and footer attributes of the configs props to configure the Shortcuts and Footer. By default configs value is null.

1import { useState } from "react"; 
2import Datepicker from "react-tailwindcss-datepicker";
3
4const App = () => { 
5    const [value, setValue] = useState({ 
6        startDate: null, 
7        endDate: null
8    });
9
10    return (
11        <Datepicker
12            showFooter={true}
13            showShortcuts={true}
14            configs={{
15                shortcuts: {
16                    today: "TText",
17                    yesterday: "YText",
18                    past: period => "P-"+ period + " text",
19                    currentMonth: "CMText",
20                    pastMonth: "PMText"
21                },
22                footer: {
23                    cancel: "CText",
24                    apply: "AText"
25                }
26            }}
27            value={value} 
28            onChange={newValue => setValue(newValue)}
29        /> 
30    );
31};
32
33export default App;
34

Custom shortcuts

Use the shortcuts attribute of the configs props to configure the Custom shortcuts. By default configs value is null.

Default keys

Shortcut keysValuesDescriptions
today`Today`Allows to have the shortcut Today
yesterday`Yesterday`Allows to have the shortcut Yesterday
past(period) => `Last ${period} days`Allows to have the shortcuts Last 7 days and Last 30 days
currentMonth`This month`Allows to have the shortcut This month
pastMonth`Last month`Allows to have the shortcut Last month

Custom keys

To configure your own shortcuts, use a different shortcut key than the ones used for the default shortcuts.

Shortcut keysValuesDescriptions
last3Days
{ 
  text: "Last 3 days"
  period: {
    start: "2024-08-20"
    end: "2024-08-22"
  }
}
Allows to have the custom shortcut Last 3 days
next8Days
{ 
  text: "Next 8 days"
  period: {
    start: "2024-08-24"
    end: "2024-08-31"
  }
}
Allows to have the custom shortcut Next 8 days
customToday
{ 
  text: "Custom Today"
  period: {
    start: "2024-08-23"
    end: "2024-08-23"
  }
}
Allows to have the custom shortcut Custom Today
1import { useState } from "react"; 
2import Datepicker from "react-tailwindcss-datepicker";
3
4const App = () => { 
5    const [value, setValue] = useState({ 
6        startDate: null, 
7        endDate: null
8    });
9
10    return (
11        <Datepicker
12            showShortcuts={true}
13            configs={{
14                shortcuts: {
15                    last3Days: {
16                        text: "Last 3 days",
17                        period: {
18                            start: new Date(new Date().setDate(new Date().getDate() - 3)),
19                            end: new Date(new Date().setDate(new Date().getDate() - 1))
20                        }
21                    },
22                    yesterday: "Yesterday",
23                    customToday: {
24                        text: "Custom Today",
25                        period: {
26                            start: new Date(),
27                            end: new Date()
28                        }
29                    },
30                    next8Days: {
31                        text: "Next 8 days",
32                        period: {
33                            start: new Date(new Date().setDate(new Date().getDate() + 1)),
34                            end: new Date(new Date().setDate(new Date().getDate() + 8))
35                        }
36                    }
37                },
38                footer: {
39                    cancel: "CText",
40                    apply: "AText"
41                }
42            }}
43            value={value} 
44            onChange={newValue => setValue(newValue)}
45        /> 
46    );
47};
48
49export default App;
50

Info

  • You should not use the default shortcuts keys for your custom shortcuts.
  • You can use a default and custom shortcut at the same time.

Localization (i18n)

React Tailwindcss Datepicker extend to dayjs which supports i18n.

List of supported locales

Use the i18n props to change the language. Default value is en.

1import { useState } from "react"; 
2import Datepicker from "react-tailwindcss-datepicker";
3
4const App = () => { 
5    const [value, setValue] = useState({ 
6        startDate: null, 
7        endDate: null
8    });
9
10    return (
11        <Datepicker
12            i18n={"fr"}
13            showFooter={true}
14            showShortcuts={true}
15            configs={{
16                shortcuts: {
17                    today: "Aujourd'hui",
18                    yesterday: "Hier",
19                    past: period => "Les "+ period +" derniers jours",
20                    currentMonth: "Ce mois-ci",
21                    pastMonth: "Le mois dernier"
22                },
23                footer: {
24                    cancel: "Quitter",
25                    apply: "Appliquer"
26                }
27            }}
28            value={value} 
29            onChange={newValue => setValue(newValue)}
30        /> 
31    );
32};
33
34export default App;
35

Start Week On

Use the startWeekOn props to override the default react-tailwindcss-datepicker start day of the week.

Select from sun, mon, tue, wed, thu, fri, or sat,

1import { useState } from "react"; 
2import Datepicker from "react-tailwindcss-datepicker";
3
4const App = () => { 
5    const [value, setValue] = useState({ 
6        startDate: null, 
7        endDate: null
8    });
9
10    return (
11        <Datepicker
12            startWeekOn="mon"
13            value={value} 
14            onChange={newValue => setValue(newValue)}
15        /> 
16    );
17};
18
19export default App;
20

Disabled Dates

Use the disabledDates to disable set specific date range or group of date range.

1import { useState } from "react"; 
2import Datepicker from "react-tailwindcss-datepicker";
3
4const App = () => { 
5    const [value, setValue] = useState({ 
6        startDate: null, 
7        endDate: null
8    });
9
10    return (
11        <Datepicker
12            disabledDates={[
13                {
14                    startDate: new Date("2024-02-02"),
15                    endDate: new Date("2024-02-05")
16                },
17                {
18                    startDate: new Date("2024-02-11"),
19                    endDate: new Date("2024-02-12")
20                }
21            ]}
22            startFrom={new Date("2024-02-01")}
23            value={value} 
24            onChange={newValue => setValue(newValue)}
25        /> 
26    );
27};
28
29export default App;
30
Previous pageProps