React.js

ReactJS DatePicker Example

In this example we will take a look at some of the options to display a DatePicker in our ReactJS application. ReactJS has seen explosive growth in popularity and a healthy ecosystem has come up around it. These libraries not only help speed up development but also provide a lot of options off the shelf when building complex UIs. Although here we will build a widget or rather a UI Component ourselves. In this example we will take a look at building a DatePicker Component.

So without further ado let us begin building our example. But first I will list out the tools and technologies used in this Example.

1. Tools and Technologies

I have used the below set of tools and technologies while working on this example. Some of them can be switched out for your favorites.

The create-react-app npm package from the folks at Facebook allows us to generate the skeletal of a ReactJS Application. We use it here to generate the starting point of our example. It uses and pulls down the latest version of ReactJS. Visual Studio Code is my favorite IDE for JavaScript development although you are free to follow along in an IDE of your choice.

2. Application Structure

Let us generate our application structure by running the below command.

>npx create-react-app my-app

npx tool that downloads a temporary copy of create-react-app and executes it with the arguments provided. Once the above command completes, we should have the below application structure ready.

ReactJS DatePicker
Project Structure

Now that we have a project structure ready let us proceed with our implementation.

3. DatePicker Component

We build a component named DatePicker in a file called DatePicker under a folder named Components. This component, implemented as a function component, renders an input tag. And we pass in the type property to this component that is then assigned within the component to the type property of the input tag.

The input tag supports 3 different types to allow us to display a date/time picker. The types are as follows:

  • date
  • datetime-local
  • time

The date type displays a datepicker allowing us to select dates. Whereas datetime-local allows us to additionally pick time as well. The time type presents UI to just pick the time.

The code for our DateTime Component looks like below:

DatePicker.js

import React from 'react';

function DatePicker(props) {
    return <input type={props.type} {...props} />;
}

export default DatePicker;

To use our DatePicker Component we need to modify the index.js file. The code for the modified index.js file looks like below:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import DatePicker from './Components/DatePicker';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-around',
      alignItems: 'center',
      height: '50vh',
      width: '100vw'
    }}>
      <DatePicker type="date" />
      <DatePicker type="datetime-local" />
      <DatePicker type="time" />
    </div>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

In the next section we run the application and see it in action.

4. Component in Action

If you are running the downloaded code for this example, you need to run the below command first.

/my-app>npm install

After this we run the below command to run the application.

/my-app>npm start

This should launch our application in the default browser and it will look like below:

ReactJS DatePicker - Project Output
Project Output

This wraps up our look at ReactJS DatePicker example. The code for this example can be found in the next section.

5. Download the Source Code

Download
You can download the full source code of this example here: ReactJS DatePicker Example

Siddharth Seth

Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button