Typing dates manually often leads to errors, especially when different formats like MM/DD/YYYY and DD/MM/YYYY are in play. That’s where a date picker component becomes incredibly useful.
In React, the most popular library for this task is react-datepicker. Over the years, I’ve used it in many projects: from scheduling apps to employee onboarding systems, and it has always saved me time.
In this tutorial, I’ll walk you through exactly how I work with the React Date Picker component. I’ll share multiple methods, complete code examples, and some tips I’ve learned the hard way.
Install and Set Up React Date Picker
Before we can use the date picker, we need to install the package. I usually start by setting up a clean React project.
npx create-react-app react-datepicker-demo
cd react-datepicker-demo
npm install react-datepicker
npm install date-fns- react-datepicker is the actual component library.
- date-fns helps with date formatting and manipulation.
Once installed, we’re ready to use the component.
Method 1 – Basic Date Picker
The simplest way to use the React Date Picker is to import it and bind it to a state variable.
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
function BasicDatePicker() {
const [selectedDate, setSelectedDate] = useState(null);
return (
<div>
<h2>Select a Date</h2>
<DatePicker
selected={selectedDate}
onChange={(date) => setSelectedDate(date)}
placeholderText="Click to select a date"
/>
{selectedDate && <p>You picked: {selectedDate.toLocaleDateString()}</p>}
</div>
);
}
export default BasicDatePicker;You can see the output in the screenshot below.
In this method, I bind the selected prop to a state variable. Whenever a user picks a date, the onChange updates the state. This is the foundation of every other customization we’ll do later.
Method 2 – Add Time Selection
Many US businesses, like appointment booking services, need both date and time selection. React Date Picker makes this easy.
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
function DateTimePicker() {
const [dateTime, setDateTime] = useState(new Date());
return (
<div>
<h2>Pick a Date and Time</h2>
<DatePicker
selected={dateTime}
onChange={(date) => setDateTime(date)}
showTimeSelect
timeFormat="HH:mm"
timeIntervals={30}
dateFormat="MMMM d, yyyy h:mm aa"
/>
<p>Selected: {dateTime.toString()}</p>
</div>
);
}
export default DateTimePicker;You can see the output in the screenshot below.
Here, I added showTimeSelect and customized the format to show 12-hour AM/PM time, which is common in the USA. The timeIntervals={30} ensures users can only pick times in 30-minute slots.
Method 3 – Restrict Date Range
In many real-world apps, I don’t want users picking past dates (e.g., when booking a doctor’s appointment).
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
function RestrictedDatePicker() {
const [date, setDate] = useState(null);
return (
<div>
<h2>Book an Appointment</h2>
<DatePicker
selected={date}
onChange={(date) => setDate(date)}
minDate={new Date()}
maxDate={new Date().setMonth(new Date().getMonth() + 2)}
placeholderText="Select a date within 2 months"
/>
{date && <p>Appointment Date: {date.toLocaleDateString()}</p>}
</div>
);
}
export default RestrictedDatePicker;You can see the output in the screenshot below.
I used minDate to block past dates and maxDate to limit selection to the next two months. This is especially handy for short-term event registrations in the US.
Method 4 – Highlight Holidays
Sometimes, I want to highlight US holidays so users avoid them when scheduling.
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
function HolidayHighlighter() {
const [date, setDate] = useState(null);
const usHolidays = [
new Date("2025-07-04"), // Independence Day
new Date("2025-11-27"), // Thanksgiving
new Date("2025-12-25"), // Christmas
];
return (
<div>
<h2>Schedule Around Holidays</h2>
<DatePicker
selected={date}
onChange={(date) => setDate(date)}
highlightDates={usHolidays}
placeholderText="Avoid holiday dates"
/>
</div>
);
}
export default HolidayHighlighter;The highlightDates prop lets me mark specific days. This is perfect for apps that need to skip US public holidays.
Method 5 – Inline Calendar
Sometimes, I don’t want users to click an input field; I want the calendar to be always visible, like in dashboards.
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
function InlineCalendar() {
const [date, setDate] = useState(new Date());
return (
<div>
<h2>Inline Calendar Example</h2>
<DatePicker
selected={date}
onChange={(date) => setDate(date)}
inline
/>
</div>
);
}
export default InlineCalendar;The inline prop keeps the calendar always open. I often use this in admin dashboards where quick navigation is needed.
Method 6 – Custom Input Field
Sometimes, clients want the date picker to look like their existing UI. React Date Picker allows custom inputs.
import React, { useState, forwardRef } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
function CustomInputDatePicker() {
const [date, setDate] = useState(null);
const CustomInput = forwardRef(({ value, onClick }, ref) => (
<button className="custom-date-btn" onClick={onClick} ref={ref}>
{value || "Pick a date"}
</button>
));
return (
<div>
<h2>Custom Input Example</h2>
<DatePicker
selected={date}
onChange={(date) => setDate(date)}
customInput={<CustomInput />}
/>
</div>
);
}
export default CustomInputDatePicker;I used forwardRef to create a custom button as the input. This makes the component fit seamlessly into branded applications.
Best Practices I’ve Learned
- Always format dates consistently (MM/DD/YYYY is standard in the US).
- Use minDate and maxDate to control user input.
- For large apps, create a wrapper component around React Date Picker to enforce consistent styles.
- Always test across browsers — Safari sometimes behaves differently with date inputs.
Conclusion
When I look back at my early projects, I realize how much time I wasted trying to build custom calendars from scratch. Working with the React Date Picker component has saved me countless hours and made my apps more reliable.
Whether you just need a basic date selector or a fully customized scheduling tool, this library has you covered.
The methods I shared, from simple setup to inline calendars and holiday highlighting, are the exact ones I use in production apps for US clients.
You may also like to read other React articles:
- Build a Search Bar Component in React
- React Component Not Rendering
- React Hooks Inside Class Components
- Build a React JS Gantt Chart Component
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
