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.

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} 
configs={{shortcuts: {today: "TText", 
yesterday: "YText", 
past: period => `P-${period} Text`, 
currentMonth: "CMText", 
pastMonth: "PMText" 
},
footer: {cancel: "CText", 
apply: "AText" 
}}} 
value={value} 
onChange={handleValueChange} 
/> 
);}; 
export default App;

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: "2023-04-15"
    end: "2023-04-17"
  }
}
Allows to have the custom shortcut Last 3 days
next8Days
{ 
  text: "Next 8 days"
  period: {
    start: "2023-04-19"
    end: "2023-04-26"
  }
}
Allows to have the custom shortcut Next 8 days
customToday
{ 
  text: "Custom Today"
  period: {
    start: "2023-04-18"
    end: "2023-04-18"
  }
}
Allows to have the custom shortcut Custom Today
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} 
configs={{shortcuts: {last3Days: { 
text: "Last 3 days",period: {start: "2023-04-15",end: "2023-04-17"}, 
}, 
yesterday: "Yesterday", 
customToday: { 
text: "Custom Today",period: {start: "2023-04-18",end: "2023-04-18"}, 
}, 
next8Days: { 
text: "Next 8 days",period: {start: "2023-04-19",end: "2023-04-26"}, 
} 
}}} 
value={value} 
onChange={handleValueChange} 
/> 
);}; 
export default App;

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.

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 
i18n={"fr"} 
configs={{shortcuts: {today: "Aujourd'hui" 
yesterday: "Hier" 
past: period => `Les ${period}  derniers jours` 
currentMonth: "Ce mois-ci" 
pastMonth: "Le mois dernier" 
},
footer: {cancel: "Quitter" 
apply: "Appliquer" 
}}} 
value={value} 
onChange={handleValueChange} 
/> 
);}; 
export default App;

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,

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 
startWeekOn="mon" 
value={value} 
onChange={handleValueChange} 
/> 
);}; 
export default App;

Disabled Dates

Use the disabledDates to disable set specific date range or group of date 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 
disabledDates={[
{
startDate: "2023-02-02",
endDate: "2023-02-05",
},
{
startDate: "2023-02-11",
endDate: "2023-02-12",
},]} 
startFrom="2023-02-02" 
value={value} 
onChange={handleValueChange} 
/> 
);}; 
export default App;
Previous pageProps