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.
import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";
const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});
const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}
return (<Datepicker
value={value}
onChange={handleValueChange}
/>
);};
export default App;Single Date
Using date picker as single date. Just use the props asSingle to true.
By default the value is false.
import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";
const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});
const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}
return (<Datepicker
asSingle={true}
value={value}
onChange={handleValueChange}
/>
);};
export default App;Use Range
With the useRange props at false you only display a calendar.
By default the value is true.
import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";
const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});
const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}
return (<Datepicker
useRange={false}
value={value}
onChange={handleValueChange}
/>
);};
export default App;Single Date & Use Range
import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";
const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});
const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}
return (<Datepicker
useRange={false}
asSingle={true}
value={value}
onChange={handleValueChange}
/>
);};
export default App;Placeholder
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.
import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";
const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});
const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}
return (<Datepicker
placeholder={"My Placeholder"}
value={value}
onChange={handleValueChange}
/>
);};
export default App;Separator
Use the separator props to change the default separator value.
By default the value is ~.
import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";
const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});
const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}
return (<Datepicker
separator={"~"}
value={value}
onChange={handleValueChange}
/>
);};
export default App;Start from
Use the startFrom props to change the default startFrom value.
By default the value is new Date().
import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";
const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});
const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}
return (<Datepicker
startFrom={new Date("2022-01-01")}
value={value}
onChange={handleValueChange}
/>
);};
export default App;Show Shortcuts & Show Footer
Use showShortcuts and showFooter to display or not the shortcuts and footer respectively.
By default both have the value false.
import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";
const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});
const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}
return (<Datepicker
showShortcuts={true}
showFooter={true}
value={value}
onChange={handleValueChange}
/>
);};
export default App;Display 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.
import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";
const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});
const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}
return (<Datepicker
value={value}
onChange={handleValueChange}
displayFormat={"DD/MM/YYYY"}
/>
);};
export default App;Read Only
Use the readOnly props to prevent editing the text field.
By default, the value is false.
import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";
const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});
const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}
return (<Datepicker
value={value}
onChange={handleValueChange}
readOnly={true}
/>
);};
export default App;Disabled
Use the disabled props to disable the react-tailwindcss-select field.
By default, the value is false.
import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";
const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});
const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}
return (<Datepicker
value={value}
onChange={handleValueChange}
disabled={true}
/>
);};
export default App;Input class
Use the inputClassName props to override the default react-tailwindcss-datepicker input classes.
import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";
const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});
const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}
return (<Datepicker
inputClassName="w-full rounded-md focus:ring-0 font-normal bg-green-100 dark:bg-green-900 dark:placeholder:text-green-100"
value={value}
onChange={handleValueChange}
/>
);};
export default App;Container class
Use the containerClassName props to override the default react-tailwindcss-datepicker input container classes.
import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";
const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});
const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}
return (<Datepicker
containerClassName="relative mt-8"
value={value}
onChange={handleValueChange}
/>
);};
export default App;Toggle class
Use the toggleClassName props to override the default react-tailwindcss-datepicker toggle button classes.
import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";
const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});
const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}
return (<Datepicker
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"
value={value}
onChange={handleValueChange}
/>
);};
export default App;Popover 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
import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";
const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});
const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}
return (<Datepicker
value={value}
popoverDirection="up"
onChange={handleValueChange}
/>
);};
export default App;Min Date and Max Date
Use the minDate and maxDate props to set range of enabled dates in between these dates.
import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";
const App = () => {
const [value, setValue] = useState({
startDate: null
endDate: null
});
const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}
return (<Datepicker
minDate={new Date("2023-01-05")}
maxDate={new Date("2023-01-30")}
value={value}
startFrom="2023-01-01"
onChange={handleValueChange}
/>
);};
export default App;