Build a Date Picker in 15mins Using Javascript/React from Scratch
INTRODUCTION
Most of us think that creating a Date Picker is a hard thing to do. Today we are going to learn how easy it is to create a Date Picker in React from scratch with the help of JavaScript Date Object, We will not be using Moment.js or any other similar library to populate the date for our DatePicker. Our end product will be looking like this.
HOW DOES IT FUNCTION
- By default, there will be input which is prefilled with Date
- Once we click on the input, Date Picker will pop out.
- The Date Picker will be having Years, Month Buttons to navigate through different years and months.
- Below the month selection, a grid of days will come.
- If we click any of the days, Date Picker will hide and we will be getting a timestamp of the day we clicked on the success function we passed to the Date Picker
That’s it, This will be a simple Date Picker.
We will not be adding a lot of functionalities and APIs. I’m keeping it that way intentionally, So it will be easier to explain and easier to understand. I will be only explaining to you the core of a Date Picker, once you understand the core you will be able to build whatever you want on top of it. So let’s do it!
SET UP THE BOILERPLATE APPLICATION
Configuring Webpack for our base React Application is a waste of time while we have an excellent node module from Facebook called create-react-app to generate a boilerplate version of a React application. those who are not aware of this can refer to this documentation.
Once you create your App using create-react-app, you can navigate to your App folder and run npm start to start the local server and you will be able to access it using your web browser with this url http://127.0.0.1:3000.
~/> npx create-react-app my-date-picker
~/> ...
~/> ...
~/> ...
~/> cd my-date-picker
~/my-date-picker/> npm startAre you able to see a boilerplate web app with a big React logo in your browser? Splendid. Now its time to build our component.
THE DATE PICKER
Let’s create a directory called MyDatePicker and create MyDatePicker.js and a MyDatePicker.css inside that real quick. In MyDatePicker.js write the basic React Component, return Input of type date and a DatePicker Container Div wrapped with Parent Div in the render function. Our file structure will look like this.
Parent Div
This will be the outermost div of component wrapping everything in one place
Container Div
This Div is the Container for our DatePicker, this div will only show up once we click the input.
Input
Input has 3 purposes here, one is to show the selected date, Another is to trigger an event to pop out the DatePicker and the last one is to edit the date by typing. The input element with the type of Date will coming with an In-Built DatePicker, but with the help of CSS, we will be disabling it.
Once we define all these elements, let's add some logic to it with React State so that by default our Container Div will be hidden and when we click on the input we will be setting the Container Div visible. when we click outside, the normal expectation of a user will be closing the DatePicker, So we will be adding logic for that also.
And when we are done with the basic setup of our DatePicker, we will be importing it to the App.js. Let’s look at how is our codebase now.
Were you able to see something like this on your screen when you click the input? Perfect! this is the base design for out DatePicker. Let’s move on to the CORE of our DatePicker.
THE CORE OF A DATE PICKER
The core of a date picker is to populate the days in a month, for this we need 2 things. One is the number of days in the month and the second one is which day is the start of the month.
START OF THE MONTH
To get the start of the month there is an inbuilt API in JavaScript.
new Date(year, month).getDay() will return the value between 0 to 6 while 0 is Sunday and 6 is Saturday
THE NUMBER OF DAYS
To get the number of days in a month, we will be using the JavaScript inbuilt API plus some simple logic.
new Date(2019, 11, 12).getDate() will return the date which is 12. and if we try this one new Date(2019, 11, 40) This will return 9, which means from 2019 Dec 1 if we count 40 days, the 40th day will be 9th of next month. Ring any bells? we will subtract this 9 from 40 which is 31. And this 31 is the number of days of the month 2019 Dec.
The value 40 is taken as an example, you can take any value which is bigger than 31 and smaller than 60. Again the reason why we took 31 is that it is the number of days any of the longest months will ever have. note that your value should not be bigger than 59. If it is bigger than 59 then there is a chance that we might skip next month and we will be getting a date of the month after the next month.
So now we have the two things which are required to populate the days of a month. I think this is the hard part for most people when building a DatePicker. Since we got the core logic of the DatePicker, Let’s jump into our code editor and implement it!
THE IMPLEMENTATION
Let’s Split out Container Div by adding two divs inside it, One is the head of the DatePicker which will be showing the Year and Month, and it will have the buttons to navigate through Year and Month.
The second Div will the body of the DatePicker where we will be rendering the Grid of the Dates. The Grid will be 7x6 where 7 is the columns and 6 is the rows. On top of the Grid, we will be adding one more row which will be filled the name of the days.
We will be binding the buttons with click events to the Year, Month navigation buttons once we are done with the design. after that, we are going to highlight the current day and selected day also.
Let’s see how our code will look like once we implement this.
Once we update our codebase like this. you should see a working date picker in your browser. Do you like it? Awesome!
Working Demo and the NPM Library
Check out the demo here, and if you think you don’t want to go through all these things, then we have a ready-made well-maintained library available here.
CONCLUSION
Most of the things which seem hard might be easy, You just have to dive into it and make it happen. You have just learned how to build a date picker from scratch without using any of the libraries. Now its time for you to add your own APIs to the DatePicker, Different themes, and different features. Happy Hacking!
Illustrations by Rinoy. Any Questions? I would love to answer and let me know if you’re hosting your version of DatePicker somewhere, I would love to see that.
