React Datepicker Tutorial with Top 2 Datepicker Libraries
Tags: javascript, webdev, react, beginners
Published: 2020-07-02 13:39:09

This post was originally published at <a href="https://www.devaradise.com/react-datepicker-tutorial">https://www.devaradise.com/react-datepicker-tutorial</a>

<!-- wp:paragraph -->
<p>React datepicker library is one of the most used libraries in React applications. It helps developers to create interactive UI for date input, datetime input, date range input, etc.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There are a lot of datepicker libraries for React out there. But, picking one that suits your project needs is not easy because each datepicker library has different features.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this post, I will review the 2 most popular React datepicker libraries (react-datepicker and react-day-picker) and show you how to use them as well.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Actually, there was another library that I want to be included here. It was react-dates. But, when I tried and do some experiment with it, I got some error that made me debugging for almost 3 hours.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>react-dates</code> using <code>install-peerdeps</code> for installing its peer dependencies that are outdated. It caused my React version downgrading to 16.1, so I can't use Hooks in that version.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It was a good and popular library, especially if you want to create a date range input. But because of what I explained above, and some other drawbacks, I decided to exclude it here.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">~~~</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Before we begin, I assume that you're already know how to initialize a react project using create-react-app because I won't explain it anymore.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I also use functional component and Hooks to manage state in the component as it is more simple and cleaner than using class-based component.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>How to Implement Datepicker using <code style="white-space:nowrap;">react-datepicker</code></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a rel="noreferrer nofollow noopener" href="https://reactdatepicker.com/" target="_blank">React-datepicker</a> is the most used and popular datepicker library for reactjs. It is simple, easy to use, well-documented and rich of features.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>react-datepicker can be used for date input, datetime input, date range input, time input, year month input, year input, month input, etc. It has a ton of attribute that helps you to customize your date input.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This library should be your first choice if you need to implement date or similar input to your react application.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Installing and Importing react-datepicker</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Installing react-datepicker is simple. Just run the following <code>npm </code>command in your project folder through terminal:</p>
<!-- /wp:paragraph -->

<!-- wp:code {"lineNumbers":false} -->
```
npm install react-datepicker --save
```
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Or use this command if you use <code>yarn</code></p>
<!-- /wp:paragraph -->

<!-- wp:code {"lineNumbers":false} -->
<pre class="wp-block-code"><code lang="bash" class="language-bash">yarn add react-datepicker</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Wait until the npm or yarn download and install it to your project.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To use it in component, you have to import <code>react-datepicker</code> and its style like this:</p>
<!-- /wp:paragraph -->

<!-- wp:code {"lineNumbers":true} -->
```javascript
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
```
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Now, you're ready to use react-datepicker in component. Let me show you some usage exampes below.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Basic Date Input Example</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A simple datepicker is a very common UI in any application. With <code>react-datepicker</code> you can easily create it like this:</p>
<!-- /wp:paragraph -->

<!-- wp:code {"lineNumbers":true} -->
```javascript
import React, { useState } from "react";

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function ReactDatepicker() {
  const [basicDate, setBasicDate] = useState(new Date());
  return (
    <div>
      <DatePicker
        selected={basicDate}
        onChange={(date) => setBasicDate(date)}
      />
    </div>
  );
}
```
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Don't forget to create a state to store date data, so you can use it later. The code above will result a datepicker as shown in the image below. I simplified the codes by removing unimportant markups.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2422,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="https://www.devaradise.com/wp-content/uploads/2020/07/react-datepicker-basic-date-input.jpg"><img src="https://www.devaradise.com/wp-content/uploads/2020/07/react-datepicker-basic-date-input-e1593675294252.jpg" alt="basic date input" class="wp-image-2422"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>For this basic datepicker, you only need 1 markup <code>&lt;DatePicker/&gt;</code> and 2 attributes: <code>selected </code>for the selected date and <code>onChange</code> to handle date change event.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Date and Time Input Example</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you want to create a datetime picker, you can also do that with <code>react-datepicker</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:code {"lineNumbers":true} -->
```javascript
import React, { useState } from "react";

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function ReactDatepicker() {
  const [dateTime, setDateTime] = useState(new Date());
  return (
    <div>
      <DatePicker
        selected={dateTime}
        onChange={date => setDateTime(date)}
        showTimeSelect
        timeFormat="HH:mm"
        timeIntervals={15}
        timeCaption="time"
        dateFormat="MMMM d, yyyy h:mm aa"
      />
    </div>
  );
}
```
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>There are more attributes to create a datetime picker. You still have to include <code>selected </code>and <code>onChange </code>attributes. The other attributes like <code>showTimeSelect</code>, <code>timeFormat</code>, <code>timeIntervals</code>, <code>timeCaption</code>, <code>dateFormat</code> are also needed.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The datetime picker will looks like the image below.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2424,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/07/react-datepicker-date-time-input-e1593675544262.jpg" alt="react datetime picker" class="wp-image-2424"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>Date Range Input Example</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Sometimes, a project needs a date range input for a certain case. With <code>react-datepicker</code> you can create that like this:</p>
<!-- /wp:paragraph -->

<!-- wp:code {"lineNumbers":true} -->
```javascript
import React, { useState } from "react";

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function ReactDatepicker() {
  const [startDate, setStartDate] = useState(new Date("2020/07/01"));
  const [endDate, setEndDate] = useState(new Date("2020/07/07"));
  return (
    <div>
      <div className="row">
        <div className="col-md-4">
           <DatePicker
              selected={startDate}
              onChange={date => setStartDate(date)}
              selectsStart
              startDate={startDate}
              endDate={endDate}
           />
        </div>
        <div className="col-md-4">
           <DatePicker
              selected={endDate}
              onChange={date => setEndDate(date)}
              selectsEnd
              startDate={startDate}
              endDate={endDate}
              minDate={startDate}
           />
        </div>
      </div>
    </div>
  );
}
```
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>You will need 2 <code>&lt;DatePicker/&gt;</code> for start and end date, as well as their states. Beside <code>selected </code>and <code>onChange </code>attributes, <code>selectsStart</code>, <code>selectsEnd</code>, <code>startDate</code>, and <code>endDate</code> also required for date range input. While <code>minDate </code>can be used to set a minimum date that can be selected in the range.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The date range input will looks like this.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2423,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/07/react-datepicker-date-range-input-e1593675525277.jpg" alt="date range input" class="wp-image-2423"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>Putting It All Together in the Form</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>When we talk about input, then we will also talk about form. The previous examples show you how to use react-datepicker individually. Now, i will show you how to use them in a form, putting all of them together.</p>
<!-- /wp:paragraph -->

<!-- wp:code {"lineNumbers":true} -->
```javascript
import React, { useState } from "react";

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function ReactDatepicker() {
  const [basicDate, setBasicDate] = useState(new Date());

  const [dateTime, setDateTime] = useState(new Date());

  const [startDate, setStartDate] = useState(new Date("2020/07/01"));
  const [endDate, setEndDate] = useState(new Date("2020/07/07"));

  const handleSubmit = (e) => {
    e.preventDefault();
    // Sample postBody request
    const postBody = {
      basicDate: basicDate,
      dateTime: dateTime,
      startDate: startDate,
      endDate: endDate
    }

    console.log(postBody);
    alert("Open your devtools - console tab");
  }

  return (
    <div>

      <form method="post" onSubmit={handleSubmit}>
        <div className="section">
          <h3 className="section-title">Basic Date Input</h3>
          <div className="section-content">
            <DatePicker
              selected={basicDate}
              onChange={(date) => setBasicDate(date)}
            />
          </div>
        </div>

        <div className="section">
          <h3 className="section-title">Date time input</h3>
          <div className="section-content">
            <DatePicker
              selected={dateTime}
              onChange={date => setDateTime(date)}
              showTimeSelect
              timeFormat="HH:mm"
              timeIntervals={15}
              timeCaption="time"
              dateFormat="MMMM d, yyyy h:mm aa"
            />
          </div>
        </div>
        
        <div className="section">
          <h3 className="section-title">Date Range Input</h3>
          <div className="section-content">
            <div className="row">
              <div className="col-md-4">
                <DatePicker
                  selected={startDate}
                  onChange={date => setStartDate(date)}
                  selectsStart
                  startDate={startDate}
                  endDate={endDate}
                />
              </div>
              <div className="col-md-4">
                <DatePicker
                  selected={endDate}
                  onChange={date => setEndDate(date)}
                  selectsEnd
                  startDate={startDate}
                  endDate={endDate}
                  minDate={startDate}
                />
              </div>
            </div>
          </div>
        </div>

        <div className="section">
          <button className="btn btn-submit">Submit Form</button>
        </div>
      </form>
    </div>
  );
}
```
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>In the code above, I put and wrap the previous code examples in a form tag. The form listens to a submit event through <code>onSubmit</code> attributes. When you submit the form by clicking a Submit form button, it will trigger <code>handleSubmit</code> function where you put some logic there, such as API calling.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In the example above, I created <code>handleSubmit </code>function only to log the state from different input in a JSON object and trigger a native JS alert. To see how it works, you can click the live demo link below.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<div class="links"><a class="link demo-link" href="https://www.devaradise.com/lab/react/datepickers/react-datepicker" target="_blank" rel="noreferrer noopener">Live Demo</a></div>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>If you want to download the codes and experiment with it locally, you can clone or <a rel="noreferrer noopener" href="https://github.com/syakirurahman/react-lab" target="_blank">download this repository on Github</a>. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>That repository does not only contain the code examples for this tutorial. It also contains the demos for other tutorials I made on this blog. Feel free to use it and don't forget to give it a star.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Other Useful Features</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>What I show you above are only basic features of <code>react-datepicker</code>. If you want to customize it or explore the other features, you can go to <a rel="noreferrer nofollow noopener" href="https://reactdatepicker.com" target="_blank">react-datepicker official website</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To name a few, the other react-datepicker features are individual time, year and month picker, custom time input, localization, multiple months picker, etc. You can implement them by adding some attributes to <code>&lt;DatePicker/&gt;</code></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>How to Implement Datepicker using <code style="white-space:nowrap;">react-day-picker</code></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In case you don't fit with <code>react-datepicker</code> for whatever reasons, I give you another option to handle date input in your project.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>react-day-picker</code> is a flexible, highly customizable, localizable, and lightweight datepicker library with ARIA support and no external dependencies.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It's quite different from <code>react-datepicker</code> that rely on the input field with a pop-up calendar to pick a date. <code>react-day-picker</code> is more like a calendar-based datepicker.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It doesn't have many options with datepicker input field. It also doesn't support date time and time picker. But it can give you a lot options if you need a calendar input on your project.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now, let's go to the technical things.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Installing and Importing react-day-picker</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Installing react-day-picker is also simple. Just run the following <code>npm</code> command in your project folder through terminal:</p>
<!-- /wp:paragraph -->

<!-- wp:code {"lineNumbers":false} -->
<pre class="wp-block-code"><code lang="bash" class="language-bash">npm install react-day-picker --save</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Or run this command if you use <code>yarn</code></p>
<!-- /wp:paragraph -->

<!-- wp:code {"lineNumbers":false} -->
<pre class="wp-block-code"><code lang="bash" class="language-bash">yarn add react-day-picker</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Wait until the npm or yarn download and install it to your project. After it finished, you can implement the examples below.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But first, you have to import it in your component. The basic import will be like this.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
```javascript
import DayPicker from "react-day-picker";
import "react-day-picker/lib/style.css";
```
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>If you want to use DayPicker with input field, you shoud also import DayPickerInput.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
```javascript
import DayPickerInput from "react-day-picker/DayPickerInput";
```
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3>Basic Calendar Example</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is similar to basic date input, but it is using calendar UI instead of input field.</p>
<!-- /wp:paragraph -->

<!-- wp:code {"lineNumbers":true} -->
```javascript
import React, { useState } from "react";

import DayPicker from "react-day-picker";
import "react-day-picker/lib/style.css";
import "./style.scss";

export default function ReactDayPicker() {
  const [basicCalendarDate, setBasicCalendarDate] = useState(new Date());
  return (
    <div>
      <DayPicker
        onDayClick={(date) => {setBasicCalendarDate(date)}}
        selectedDays={basicCalendarDate}
      />
    </div>
   );
}
```
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>To create basic calendar datepicker using react-day-picker, you can use <code>&lt;DayPicker/&gt;</code> with <code>onDayClick</code> attribute to handle date change event and <code>selectedDays</code> attribute to store selected date. You should also create a react state to store date data.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The UI will look like this. Don't mind with the labels above/below the calendar. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2426,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/07/basic-calendar-daypicker-e1593675366741.jpg" alt="Basic calendar daypicker" class="wp-image-2426"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>In this example, i also put some style to give a white background color for the calendar because the original one is transparent.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Calendar Date Range Example</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><code>react-day-picker</code> also can handle date range input. In fact, you have 2 options for this. You can create a date range with calendar and date range with input field.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But here, I will only show a calendar date range example. if you want date range with input, you can see it <a href="https://react-day-picker.js.org/examples/input-from-to" target="_blank" rel="noreferrer nofollow noopener">here in the official example.</a></p>
<!-- /wp:paragraph -->

<!-- wp:code {"lineNumbers":true} -->
```javascript
import React, { useState } from "react";
import DayPicker, { DateUtils } from "react-day-picker";
import "react-day-picker/lib/style.css";

export default function ReactDayPicker() {
  const [from, setFrom] = useState(undefined);
  const [to, setTo] = useState(undefined);
  return (
    <div>
      <DayPicker
        numberOfMonths={2}
        selectedDays={[from, { from, to }]}
        onDayClick={(date) => {
          const range = DateUtils.addDayToRange(date, { from, to });
          setFrom(range.from);
          setTo(range.to);
        }}
      />
    </div>
  );
}
```
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>To implement date range input with <code>react-day-picker</code>, you don't have 2 <code>&lt;DayPicker/&gt;</code> . You only need the same attributes you use to initialize a basic calendar, but with different values. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You can also add <code>numberOfMonths</code> to specify how many months do you want to show in the date range calendar.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In the code above, i use DateUtils.addDayToRange() to add new selected day to current date range. DateUtils contains some utilities to help you customize <code>react-day-picker</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The UI for calendar date range, will looks like this.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2421,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/07/calendar-daterange-e1593675508444.jpg" alt="calendar date range" class="wp-image-2421"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>Basic Datepicker with Input Field</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you still want to use datepicker with input field with <code>react-day-picker</code>, you can do it like this.</p>
<!-- /wp:paragraph -->

<!-- wp:code {"lineNumbers":true} -->
```javascript
import React, { useState } from "react";
import DayPickerInput from "react-day-picker/DayPickerInput";
import "react-day-picker/lib/style.css";

export default function ReactDayPicker() {
  const [basicInputDate, setBasicInputDate] = useState(new Date());
  return (
    <div>
      <DayPickerInput 
         onDayChange={(day) => setBasicInputDate(day)} 
         value={basicInputDate}
      />
    </div>
  );
}
```
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>As you see above, it's quite similar to <code>react-date-picker</code> if you want to create datepicker input with <code>react-day-picker</code>. The different are just attribute names and the component name.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You don't have to import <code>DayPicker</code> because it has wrapped inside <code>DayPickerInput</code>. You need <code>onDayChange</code> attribute to handle date change event, and <code>value</code> to show selected date in the input field.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The UI for <code>DayPickerInput </code>will look like this.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2427,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/07/basic-date-input-daypicker-e1593675342220.jpg" alt="basic dateinput with react-day-picker" class="wp-image-2427"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>If you want to see the live demo of <code>react-day-picker</code> examples above, you can click the demo link below.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<div class="links"><a class="link demo-link" href="https://www.devaradise.com/lab/react/datepickers/react-day-picker" target="_blank" rel="noreferrer noopener">Live Demo</a></div>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>If you want to download the codes and experiment with it locally, you can clone or <a rel="noreferrer noopener" href="https://github.com/syakirurahman/react-lab" target="_blank">download this repository on Github</a>. </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Other Features</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>There are still a lot of features on <code>react-day-picker</code> you can explore in the official documentation. <code>react-day-picker</code> is also support localization, week selection/picker, custom calendar navigation, week numbers, multiple days, etc.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Actually, I was trying to show you how to use multiple days picker here. But, I can't show it with a functional component and Hooks right now. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In <a href="https://react-day-picker.js.org/examples/selected-multiple" target="_blank" rel="noreferrer noopener">the official example</a>, they use a class-based component to show the multiple days usage example. When I tried to convert it to functional component and use Hooks, I found a bug.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The date change only triggered when I navigate to next month and back to the selected month. So, I think it isn't compatible with Hooks and I don't want to force to use class-based component just to implement that.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you want to use multiple days picker, you can follow the official example I linked before.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Conclusion</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can implement datepicker in your project with the library you choose. Make sure it's suitable and fulfill your project requirements. You still have to do some experiments if you want to customize it. Just follow the official documentation. In case you get stuck, you can ask me in the comment below.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If these 2 libraries don't fit with you, there are still a lot of libraries out there. If you found other good datepicker libraries that are not included here, please let me know through the comment below so I can review them. I might want to add one or some of them here.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Happy coding!</p>
<!-- /wp:paragraph -->