ReactJS Date Picker

Last modified on: September 7, 2025

<h1 data-start="402" data-end="432">⚛️ <strong data-start="407" data-end="430">ReactJS Date Picker</strong></h1>
<p data-start="434" data-end="706">A <strong data-start="436" data-end="451">Date Picker</strong> is a component that allows users to <strong data-start="488" data-end="519">select dates or date ranges</strong> easily.<br data-start="527" data-end="530" />React doesn&rsquo;t include a built-in date picker, so developers often use popular libraries like <strong data-start="623" data-end="645"><code data-start="625" data-end="643">react-datepicker</code></strong>, <strong data-start="647" data-end="669"><code data-start="649" data-end="667">react-day-picker</code></strong>, or <strong data-start="674" data-end="703">Material UI&rsquo;s Date Picker</strong>.</p>
<hr data-start="708" data-end="711" />
<h2 data-start="713" data-end="757">🔹 <strong data-start="719" data-end="755">1. Installing <code data-start="735" data-end="753">react-datepicker</code></strong></h2>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>npm install react-datepicker
npm install date-fns
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="822" data-end="838">Import styles:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import "react-datepicker/dist/react-datepicker.css";
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="903" data-end="906" />
<h2 data-start="908" data-end="936">🔹 <strong data-start="914" data-end="934">2. Basic Example</strong></h2>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import React, { useState } from "react";
import DatePicker from "react-datepicker";

function App() {
  const [startDate, setStartDate] = useState(new Date());

return (
    &lt;div&gt;
      &lt;h2&gt;Select a Date:&lt;/h2&gt;
      &lt;DatePicker selected={startDate} onChange={(date) =&gt; setStartDate(date)} /&gt;
    &lt;/div&gt;
  );
}

export default App;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1283" data-end="1316">✅ Simple single-date selection.</p>
<hr data-start="1318" data-end="1321" />
<h2 data-start="1323" data-end="1353">🔹 <strong data-start="1329" data-end="1353">3. Advanced Features</strong></h2>
<h3 data-start="1355" data-end="1384">3.1 <strong data-start="1363" data-end="1384">Date Range Picker</strong></h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import React, { useState } from "react";
import DatePicker from "react-datepicker";

function DateRangePicker() {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

return (
    &lt;div&gt;
      &lt;h2&gt;Select Date Range:&lt;/h2&gt;
      &lt;DatePicker
        selected={startDate}
        onChange={(date) =&gt; setStartDate(date)}
        selectsStart
        startDate={startDate}
        endDate={endDate}
        placeholderText="Start Date"
      /&gt;
      &lt;DatePicker
        selected={endDate}
        onChange={(date) =&gt; setEndDate(date)}
        selectsEnd
        startDate={startDate}
        endDate={endDate}
        minDate={startDate}
        placeholderText="End Date"
      /&gt;
    &lt;/div&gt;
  );
}

export default DateRangePicker;
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="2174" data-end="2177" />
<h3 data-start="2179" data-end="2209">3.2 <strong data-start="2187" data-end="2209">Custom Date Format</strong></h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>&lt;DatePicker
  selected={startDate}
  onChange={(date) =&gt; setStartDate(date)}
  dateFormat="MMMM d, yyyy" // e.g., September 7, 2025
/&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="2357" data-end="2360" />
<h3 data-start="2362" data-end="2398">3.3 <strong data-start="2370" data-end="2398">Disabling Specific Dates</strong></h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>&lt;DatePicker
  selected={startDate}
  onChange={(date) =&gt; setStartDate(date)}
  excludeDates={[new Date("2025-09-10"), new Date("2025-09-15")]}
/&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="2557" data-end="2560" />
<h3 data-start="2562" data-end="2592">3.4 <strong data-start="2570" data-end="2592">Inline Date Picker</strong></h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>&lt;DatePicker
  selected={startDate}
  onChange={(date) =&gt; setStartDate(date)}
  inline
/&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2694" data-end="2752">✅ Renders calendar directly in the page, not as a popup.</p>
<hr data-start="2754" data-end="2757" />
<h2 data-start="2759" data-end="2794">🔹 <strong data-start="2765" data-end="2794">4. Integrating with Forms</strong></h2>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import React, { useState } from "react";
import DatePicker from "react-datepicker";

function EventForm() {
  const [eventDate, setEventDate] = useState(new Date());

const handleSubmit = (e) =&gt; {
    e.preventDefault();
    alert(`Event Date: ${eventDate.toDateString()}`);
  };

return (
    &lt;form onSubmit={handleSubmit}&gt;
      &lt;label&gt;Event Date:&lt;/label&gt;
      &lt;DatePicker selected={eventDate} onChange={(date) =&gt; setEventDate(date)} /&gt;
      &lt;button type="submit"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  );
}

export default EventForm;
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="3342" data-end="3345" />
<h2 data-start="3347" data-end="3372">📊 <strong data-start="3353" data-end="3370">Advanced Tips</strong></h2>
<div class="_tableContainer_1rjym_1">
<div class="_tableWrapper_1rjym_13 group flex w-fit flex-col-reverse" tabindex="-1">
<table class="w-fit min-w-(--thread-content-width)" data-start="3374" data-end="3866">
<thead data-start="3374" data-end="3414">
<tr data-start="3374" data-end="3414">
<th data-start="3374" data-end="3399" data-col-size="sm">Feature</th>
<th data-start="3399" data-end="3414" data-col-size="sm">Description</th>
</tr>
</thead>
<tbody data-start="3456" data-end="3866">
<tr data-start="3456" data-end="3522">
<td data-start="3456" data-end="3481" data-col-size="sm">Date Range Picker</td>
<td data-start="3481" data-end="3522" data-col-size="sm"><code data-start="3483" data-end="3497">selectsStart</code> and <code data-start="3502" data-end="3514">selectsEnd</code> props</td>
</tr>
<tr data-start="3523" data-end="3588">
<td data-start="3523" data-end="3548" data-col-size="sm">Date Formatting</td>
<td data-start="3548" data-end="3588" data-col-size="sm"><code data-start="3550" data-end="3562">dateFormat</code> prop for custom display</td>
</tr>
<tr data-start="3589" data-end="3657">
<td data-start="3589" data-end="3614" data-col-size="sm">Disable Dates</td>
<td data-start="3614" data-end="3657" data-col-size="sm"><code data-start="3616" data-end="3630">excludeDates</code> or <code data-start="3634" data-end="3643">minDate</code> / <code data-start="3646" data-end="3655">maxDate</code></td>
</tr>
<tr data-start="3658" data-end="3725">
<td data-start="3658" data-end="3683" data-col-size="sm">Inline Calendar</td>
<td data-start="3683" data-end="3725" data-col-size="sm"><code data-start="3685" data-end="3693">inline</code> prop renders directly in page</td>
</tr>
<tr data-start="3726" data-end="3796">
<td data-start="3726" data-end="3751" data-col-size="sm">Localization</td>
<td data-start="3751" data-end="3796" data-col-size="sm">Use <code data-start="3757" data-end="3765">locale</code> prop with <code data-start="3776" data-end="3786">date-fns</code> locales</td>
</tr>
<tr data-start="3797" data-end="3866">
<td data-start="3797" data-end="3822" data-col-size="sm">Custom Input</td>
<td data-start="3822" data-end="3866" data-col-size="sm"><code data-start="3824" data-end="3837">customInput</code> prop to style input fields</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr data-start="3868" data-end="3871" />
<h2 data-start="3873" data-end="3891">✅ <strong data-start="3878" data-end="3889">Summary</strong></h2>
<ul data-start="3892" data-end="4272">
<li data-start="3892" data-end="3953">
<p data-start="3894" data-end="3953">React Date Picker makes <strong data-start="3918" data-end="3950">date selection user-friendly</strong>.</p>
</li>
<li data-start="3954" data-end="4041">
<p data-start="3956" data-end="4041">Popular libraries: <code data-start="3975" data-end="3993">react-datepicker</code>, <code data-start="3995" data-end="4013">react-day-picker</code>, Material UI Date Picker.</p>
</li>
<li data-start="4042" data-end="4124">
<p data-start="4044" data-end="4124">Supports <strong data-start="4053" data-end="4121">single date, date ranges, custom formatting, and disabling dates</strong>.</p>
</li>
<li data-start="4125" data-end="4179">
<p data-start="4127" data-end="4179">Can be integrated with forms or custom UI designs.</p>
</li>
<li data-start="4180" data-end="4272">
<p data-start="4182" data-end="4272">Advanced props and customization make it suitable for <strong data-start="4236" data-end="4269">production-grade applications</strong>.</p>
</li>
</ul>

Web Technology View More