Props
All props except primaryColor that are available for configuring the react-tailwindcss-datepicker.
Default Configuration
The react-tailwindcss-datepicker if you don't set any props.
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 value={value}
13 onChange={newValue => setValue(newValue)}
14 />
15 );
16};
17
18export default App;
19Single Date
Using date picker as single date. Just use the props asSingle to true.
By default the value is false.
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 asSingle={true}
13 value={value}
14 onChange={newValue => setValue(newValue)}
15 />
16 );
17};
18
19export default App;
20Use Range
With the useRange props at false you only display a calendar.
By default the value is true.
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 useRange={false}
13 value={value}
14 onChange={newValue => setValue(newValue)}
15 />
16 );
17};
18
19export default App;
20Single Date & Use 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 useRange={false}
13 asSingle={true}
14 value={value}
15 onChange={newValue => setValue(newValue)}
16 />
17 );
18};
19
20export default App;
21Placeholder
Use the placeholder props to change the default placeholder value.
By default the value is YYYY-MM-DD ~ YYYY-MM-DD or YYYY-MM-DD.
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 placeholder="My Placeholder"
13 value={value}
14 onChange={newValue => setValue(newValue)}
15 />
16 );
17};
18
19export default App;
20Separator
Use the separator props to change the default separator value.
By default the value is ~.
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 separator="to"
13 value={value}
14 onChange={newValue => setValue(newValue)}
15 />
16 );
17};
18
19export default App;
20Start from
Use the startFrom props to change the default startFrom value.
By default the value is new Date().
1import { useState } from "react";
2import Datepicker from "react-tailwindcss-datepicker";
3
4const START_FROM = new Date();
5START_FROM.setMonth(START_FROM.getMonth() + 1);
6
7const App = () => {
8 const [value, setValue] = useState({
9 startDate: null,
10 endDate: null
11 });
12
13 return (
14 <Datepicker
15 startFrom={START_FROM}
16 value={value}
17 onChange={newValue => setValue(newValue)}
18 />
19 );
20};
21
22export default App;
23Show Shortcuts & Show Footer
Use showShortcuts and showFooter to display or not the shortcuts and footer respectively.
By default both have the value false.
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 showFooter={true}
14 value={value}
15 onChange={newValue => setValue(newValue)}
16 />
17 );
18};
19
20export default App;
21Display Format
Use the displayFormat props to change the date display format.
By default, the value is YYYY-MM-DD.
Warning
⚠️ Editing the text field to change the date range only supports the YYYY-MM-DD format at this time.
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 displayFormat="DD/MM/YYYY"
13 value={value}
14 onChange={newValue => setValue(newValue)}
15 />
16 );
17};
18
19export default App;
20Read Only
Use the readOnly props to prevent editing the text field.
By default, the value is false.
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 readOnly={true}
13 value={value}
14 onChange={newValue => setValue(newValue)}
15 />
16 );
17};
18
19export default App;
20Disabled
Use the disabled props to disable the react-tailwindcss-datepicker field.
By default, the value is false.
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 disabled={true}
13 value={value}
14 onChange={newValue => setValue(newValue)}
15 />
16 );
17};
18
19export default App;
20Input id, name and required
Use the inputId, inputName and required props to add id, name and required to the react-tailwindcss-datepicker field.
By default, required value is false.
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 inputId="datepicker"
13 inputName="datepicker"
14 required={true}
15 value={value}
16 onChange={newValue => setValue(newValue)}
17 />
18 );
19};
20
21export default App;
22Input class
Use the inputClassName props to override the default react-tailwindcss-datepicker input classes.
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 inputClassName="w-full rounded-md focus:ring-0 font-normal bg-blue-300 placeholder:text-blue-100 text-white dark:bg-blue-900 dark:placeholder:text-blue-100"
13 value={value}
14 onChange={newValue => setValue(newValue)}
15 />
16 );
17};
18
19export default App;
20Container class
Use the containerClassName props to override the default react-tailwindcss-datepicker input container classes.
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 containerClassName="relative mt-8"
13 value={value}
14 onChange={newValue => setValue(newValue)}
15 />
16 );
17};
18
19export default App;
20Toggle class
Use the toggleClassName props to override the default react-tailwindcss-datepicker toggle button classes.
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 toggleClassName="absolute bg-blue-300 rounded-r-lg text-white right-0 h-full px-3 text-gray-400 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed"
13 value={value}
14 onChange={newValue => setValue(newValue)}
15 />
16 );
17};
18
19export default App;
20Popover direction
Use the popoverDirection props to set the display position of the calendar.
popoverDirection can take the value "up" or "down". By default popoverDirection is undefined
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 popoverDirection="up"
13 value={value}
14 onChange={newValue => setValue(newValue)}
15 />
16 );
17};
18
19export default App;
20Min Date and Max Date
Use the minDate and maxDate props to set range of enabled dates in between these dates.
1import { useState } from "react";
2import Datepicker from "react-tailwindcss-datepicker";
3
4const MIN_DATE = new Date();
5MIN_DATE.setDate(MIN_DATE.getDate() - 4);
6
7const MAX_DATE = new Date();
8MAX_DATE.setDate(MAX_DATE.getDate() + 4);
9
10const App = () => {
11 const [value, setValue] = useState({
12 startDate: null,
13 endDate: null
14 });
15
16 return (
17 <Datepicker
18 minDate={MIN_DATE}
19 maxDate={MAX_DATE}
20 value={value}
21 onChange={newValue => setValue(newValue)}
22 />
23 );
24};
25
26export default App;
27