How to customize react day picker
Introduction
This tutorial will guide you through the process of customizing the react day picker component using Tailwind CSS. We'll cover the basics of setting up the project, creating the component, and styling the elements.
Prerequisites
Before we begin, make sure you have the following installed:
- React.js or (Any other react framework)
- Tailwind CSS
- Vite
- React Day Picker
Setting Up the Project
To get started, create a new Vite project using the following command:
npm init vite@latest my-react-day-picker-app --template react-ts
Next, navigate to the project directory and install the necessary dependencies:
cd my-react-day-picker-app
npm install react-day-picker tailwindcss
Then, Go to the gloabl.css or index.css file and add the following code:
@tailwind base;
@tailwind components;
@tailwind utilities;
Customize react day picker component
- Customize the appearance of the component
- Add components and functionalities to date picker
- Customize the date picker's behavior
- Add custom icons to arrow's
Here's what we're aiming for:
Implementation Steps - Single Mode Calendar Example
Step 1: Create the Custom Day Picker Component
First, let's set up our CustomDayPicker.tsx component:
import React from 'react';
const CustomDayPicker = () => {
return (
<div>Custom Day Picker Component</div>
);
};
export default CustomDayPicker;
Step 2: Add React Day Picker
We'll use the DayPicker component from the react-day-picker library to create our custom day picker:
import React from 'react';
import { DayPicker } from "react-day-picker";
import "react-day-picker/style.css";
const CustomDayPicker = () => {
const [selected, setSelected] = React.useState<Date | undefined>(undefined);
const handleDayClick = (day: Date | undefined) => {
setSelected(day);
};
return (
<div className="flex flex-col items-center justify-center">
<p className="text-lg text-orange-500 font-bold">
React Date Picker Example
</p>
<p className="text-sm text-gray-500">
Selected date: {selected?.toLocaleDateString()}
</p>
<DayPicker
mode="single"
onSelect={handleDayClick}
selected={selected}
/>
</div>
);
};
Step 3: Add Custom styles
To customize the appearance of the day picker, we can use the DayPicker component's classNames and 'components' prop to add custom styles:
import React from 'react';
import { DayPicker, getDefaultClassNames } from "react-day-picker";
import { ChevronDown, ChevronLeft, ChevronRight, Circle } from "lucide-react";
import "react-day-picker/style.css";
const CustomDayPicker = () => {
const [selected, setSelected] = React.useState<Date | undefined>(undefined);
const defaultClassNames = getDefaultClassNames();
const handleDayClick = (day: Date | undefined) => {
setSelected(day);
};
return (
<div className="flex flex-col items-center justify-center">
<p className="text-lg text-orange-500 font-bold">
React Date Picker Example
</p>
<p className="text-sm text-gray-500">
Selected date: {selected?.toLocaleDateString()}
</p>
<DayPicker
mode="single"
onSelect={handleDayClick}
selected={selected}
classNames={{
selected: `text-white`,
root: `${defaultClassNames.root} shadow-lg p-5`,
day: `group w-10 h-10 rounded-full ${defaultClassNames.day}`,
caption_label: `text-base`,
}}
components={{
/* Custom Button */
DayButton: (props) => {
const { day, ...buttonProps } = props;
return (
<button
{...buttonProps}
className="bg-zinc-200 w-10 h-10 m-1 group-aria-selected:bg-orange-700 rounded-full"
onClick={() => setSelected(day.date)}
/>
);
},
/* Custom Chevron Icon */
Chevron: ({ className, orientation, ...chevronProps }) => {
switch (orientation) {
case "left":
return (
<ChevronLeft
className={`${className} w-4 h-4 fill-amber-700`}
{...chevronProps}
/>
);
case "right":
return (
<ChevronRight
className={`${className} w-4 h-4 fill-amber-700`}
{...chevronProps}
/>
);
case "down":
return (
<ChevronDown
className={`${className} w-4 h-4 fill-amber-700`}
{...chevronProps}
/>
);
case "up":
return (
<ChevronDown
className={`${className} w-4 h-4 fill-amber-700`}
{...chevronProps}
/>
);
default:
return (
<Circle className={`${className} w-4 h-4 fill-amber-700`} />
);
}
},
}}
/>
</div>
);
};
Step 4: Add functionality to the Custom Day Picker
Now, let's enhance the functionality of our custom day picker component by adding the following features:
- Disable selection of previous dates, Saturdays, and Sundays from the chosen date.
- Allow selection of dates up to 20 days from the current date.
- Set the starting year as 2020 and the ending year as 2025.
import React from 'react';
import { DayPicker, getDefaultClassNames } from "react-day-picker";
import { ChevronDown, ChevronLeft, ChevronRight, Circle } from "lucide-react";
import "react-day-picker/style.css";
const CustomDayPicker = () => {
const [selected, setSelected] = React.useState<Date | undefined>(undefined);
/* Today's date */
const today = new Date();
/* Calculate the date 20 days from today */
const twentyDaysFromNow = new Date();
twentyDaysFromNow.setDate(today.getDate() + 20);
/* Years Start from */
const startYear = new Date(2010, 0);
/* Years End from */
const endYear = new Date(2025, 0);
const handleDayClick = (day: Date | undefined) => {
setSelected(day);
};
return (
<div className="flex flex-col items-center justify-center">
<p className="text-lg text-orange-500 font-bold">
React Date Picker Example
</p>
<p className="text-sm text-gray-500">
Selected date: {selected?.toLocaleDateString()}
</p>
<DayPicker
mode="single"
selected={selected}
onDayClick={handleDayClick}
disabled={[
{ before: today },
{ dayOfWeek: [0, 6] },
{ after: twentyDaysFromNow },
]}
startMonth={startYear}
endMonth={endYear}
classNames={{
selected: `text-white`,
root: `${defaultClassNames.root} shadow-lg p-5`,
day: `group w-10 h-10 rounded-full ${defaultClassNames.day}`,
caption_label: `text-base`,
}}
components={{
/* Custom Button */
DayButton: (props) => {
const { day, ...buttonProps } = props;
return (
<button
{...buttonProps}
className="bg-zinc-200 w-10 h-10 m-1 group-aria-selected:bg-orange-700 rounded-full"
onClick={() => setSelected(day.date)}
/>
);
},
/* Custom Chevron Icon */
Chevron: ({ className, orientation, ...chevronProps }) => {
switch (orientation) {
case "left":
return (
<ChevronLeft
className={`${className} w-4 h-4 fill-amber-700`}
{...chevronProps}
/>
);
case "right":
return (
<ChevronRight
className={`${className} w-4 h-4 fill-amber-700`}
{...chevronProps}
/>
);
case "down":
return (
<ChevronDown
className={`${className} w-4 h-4 fill-amber-700`}
{...chevronProps}
/>
);
case "up":
return (
<ChevronDown
className={`${className} w-4 h-4 fill-amber-700`}
{...chevronProps}
/>
);
default:
return (
<Circle className={`${className} w-4 h-4 fill-amber-700`} />
);
}
},
}}
/>
</div>
);
};
Step 5: Use the Custom Day Picker Component
Finally, import and use the CustomDayPicker component in your desired page or component:
import CustomDayPicker from '@/components/CustomDayPicker';
export default function Home() {
return (
<div>
<h1>Welcome to My App</h1>
<CustomDayPicker />
</div>
);
}
Implementation - Range Mode Calendar Example
Create the Custom Range Day Picker Component
First, let's set up our CustomRangeDayPicker.tsx component:
import React from "react";
import { DayPicker, getDefaultClassNames } from "react-day-picker";
export const CustomRangeDayPicker = () => {
const [selected, setSelected] = React.useState<{
from: Date | null;
to: Date | null;
}>();
const defaultClassNames = getDefaultClassNames();
/* Today's date */
const today = new Date();
return (
<div className="block">
<p className="text-lg text-orange-500 font-bold">
Range Date Picker Example
</p>
<p className="text-sm text-gray-500 mb-5">
Selected date: {selected?.from?.toLocaleDateString()} -{" "}
{selected?.to?.toLocaleDateString()}
</p>
<DayPicker
mode="range"
selected={
selected?.from && selected?.to
? { from: selected.from, to: selected.to }
: undefined
}
onSelect={(selected) =>
setSelected(
selected?.from && selected?.to
? { from: selected.from, to: selected.to }
: undefined
)
}
disabled={[{ before: today }]}
className="custom-dropdown-root"
classNames={{
selected: `text-white`,
root: `${defaultClassNames.root} shadow-lg p-5`,
chevron: `w-4 h-4 fill-amber-700`,
day: `group w-10 h-10 rounded-full`,
caption_label: `text-base`,
disabled: `text-gray-500`,
}}
components={{
DayButton: (props) => {
const { ...buttonProps } = props;
return (
<button
{...buttonProps}
className="text-zinc-950 bg-zinc-200 w-10 h-10 m-1 group-aria-selected:bg-orange-700 group-aria-selected:text-white rounded-full"
/>
);
},
}}
/>
</div>
);
};
