How to create Datepicker with Calendar Icon using React?

[Music] Hello friends and welcome back to front in pathshala in this tutorial we will learn how to create date picker with icon using react as we all know icons can improve the overall user experience of the application so without delaying let's get started I have created a folder react date picker and have opened it in the visual studio code to create a new react application we will make use of create react app open the integrated terminal and run the command in PX create react app followed by the name of the project which is date picker once the command completes you will see a new folder date picker to run this application navigate inside the project folder so CD date picker now let's run the command npm start the command will open the browser in localhost 3000. so our application is up and running go to visual studio code let's edit app.js I'll just remove this code and inside the P tag I'll write hello after saving this file you can see that all the tags are displaced and we are getting some error in order to fix that we'll click on this JavaScript just choose JavaScript react after that let's change the extension of app.js to app.jsx then go to view command palette and run the reload window now remove this and rewrite the code again just say wait and now you can see that the problem is fixed and our code is working perfectly fine now let's start creating the date picker first import react ROM react Ctrl C yes now let's install the react date pickup package by running the command npm install react date picker in your terminal once the installation is done we can use the react date picker so import date picker from react date picker the package provides the CSS as well so let's import that import react date picker slash dist slash reactdatepicker dot CSS now we can use the date picker component for this component we need to specify two properties selected and on change event handler next step is we need to import use state from react let's create the state variable variable is selected date function is set date let us set the initial value as null now let's specify the props value selected is equals to selected date on change Arrow function data's parameter call set date and then pass in that parameter let's save this and in the terminal let us give the command in PM start in the browser you can see the input element and when we click on that input box date picker appears now let's add a calendar icon to input field firstly we will add bootstrap or styling for that will give the command npm install bootstrap import bootstrap.min.css next for the icon we will run the command npm install react hyphen icons just import the required icon from the react icons package we will create a function custom input which will help to render input field with an icon function custom input will pass the parameter value and on click return we'll create the div with class name input group this is bootstrap class then import type is equals to text then we'll give the class name form control value is equals to value and on click is equals to on click read only mode next create another div with the class name input group append this is for the icon and inside that will give this pan with class name input group text then we'll give the icon name if a calendar Alt give the command npm start in the terminal okay before that we need to pass this custom input field to the date picker component so custom input prop is equals to curly braces custom input save this let's check in the browser you can see the calendar icon now but if you click on the icon the date picker doesn't appear so for that we will place the date picker component inside the label tag let's check now on click of the calendar icon date picker pops up for the final change we will add few CSS for the look and fill go to app.css for the class input group text will give height 40pa and cursor pointer now it's looking better let me give a heading to this so guys with this we have completed this tutorial please let me know your feedback in the comment section below and don't forget to like share and subscribe to my channel bye

Channel: Frontend Paathshala

Views: 9,491

Keywords:

Id: U3hHaQlC2nQ

Length: 9min 53sec (593 seconds)

Published: Mon Sep 04 2023