How to Use Material UI Date Picker in React Js

so in this video we are going to build this simple project you can see on the screen that there is a component where we can pick a date from the calendar and there's a button that is to book an appointment and as soon as we click on this button we get a message your appointment is booked on the date that you have selected so the main idea in this project is to learn how to use this date picker component how to add a date picker component to any of your react applications so it's a very simple project but it's going to be a very informative video so stay tuned till the end and if you like this video and and if you find the information helpful make sure you subscribe to the channel so guys I have a basic react application running here on the Local Host 3000 so I also have a documentation opened from Material UI about date and time piers and how we can get started on that so first thing that we are going to do in this fresh application is to install all the packages that we are going to need in this application and if you go through this documentation so the first thing that this documentation is telling us is that we are going to need to install some packages to be able to use these date and time Pickers from Material UI so I'm going to go ahead and do that so I'll copy this command that is to install basically material UI into the application so I'll copy that go to my react application open a new terminal and paste it here and hit enter so now material UI is installed in this application but as per documentation we are going to need some more packages we have to install a package that is specific to date Pickers and then we have to install a package that is DJs I'll copy this command from here go back to my application I'm going to paste it here and I'm also going to mention another package that is DJs and hit enter to install it so now we have all the packages that we are going to need in this application so let's go ahead and remove all the default code that we have here and put hello world in place of that just to see if application is running fine let's go back to the browser and see we can see Hello World on our application so the application is running fine and we can start building this project so now we are going to make some imports into this application the first thing that we are going to import is react and use effect from react and we are going to need some packages from the date Pier package that we have just installed in this application so I'm going to import date Pier from the date peer package that we have installed in this application and along with date peer we are also going to need something called localization provider we'll see in a minute why we need all these packages but for now I'm just importing all of them and along with localization provider I'm also going to need adapter DJs From the same package that is date piers and the last thing that we are going to need is the DJs From the DJs package so now we have all the packages that we are going to need in this application and we have imported all of them I'm going to place my date picker component here in place of hello world I'm going to replace it with date picker so this is my date peer component and I'm going to wrap this date peer component with my localizer ation provider which I have imported as well so I'm going to cut this part and wrap my date picker under localization provider I'm actually going to remove this and simplify it and make it a self- closing tag for the date picker component so now we have a localization provider and we have a date fcker that is enclosed within this localization provider and we have to pass a parameter here into localization provider and that is going to be date adapter and we have already imported the date adapter here so I'm going to copy this from here and pass it here now let's save this entire thing and let's go back to the browser and see how it's looking on the screen so now on the screen we can see that we have a date picker here and as soon as we click on that we see the entire calendar here from where we can we should be able to pick any date so let me explain how this is working in material UI so this date picker component is basically this entire text field that we have here but this text field is being populated by the entire calendar with the help of this localization provider that is that is a inbuilt component within material UI so this localization provider along with this adapter date JS is doing all the magic creating the entire calendar for us inside this simple text field so we don't have to go and build the calendar manually so we have a simple date picker here as of now it's not doing anything we can change the date here but we need to do some more work so we can actually select the date and book an appointment the first thing we are going to do is we will try to improve the layout of this first and we we'll try and bring this in the center of the page and also add a button that we had in the original application so let's go back to the react application so all the CSS that is being written in this application is here in the app so I'm going to check this app. CSS file so on this app. CSS file I'm just going to put some CSS I'll say my display is going to be grid and I'm going to make a grd template columns to be 100% and I'm also going to assign some margins so my margins are going to be 10% 30% 10% and then again 30% let's save it and see how this is changing in our browser so now you can see that it has come down a little bit on the center of the page and it's looking much better now so the next thing we have to do here is we have to add a button here that should say book an appointment so let's go back to the application and do that so I think we have not imported a button here so I'm going to import button from Material UI and I'm going to place this button right below the localization provider so my button is going to be here and button is going to say a text that is book and appointment so now if I go back to the browser I should be able to see the button here but I would like to have some margins between this date picker component and the button and probably we should have some background on this button so the button looks solid on the screen so I'm going to put a variant here on the button so variant is going to be contained so if I mention variant is equal to contained my button is going to be a solid button on the screen as you can see here so now we need a margin between these two components so I'll go back to my app. CSS so here in my CSS I can probably mention a gap of 10% so now we can go back on the screen and see so now it has created some amount of margin between these two components now it's looking much better but as of now if I select any date and I book an appointment it's doing actually nothing because if you go to JS we haven't mentioned any functions here on the date picker components so we are going to do that so what I do is I'll create a state variable in this application and the state variable is going to be value comma set value so it's going to be a use state so we have to assign some date here as a initial value for the date picker component so I'll go ahead and create a date variable so let's create a date variable by using the date function in JavaScript so basically the date variable will create whatever the current date is and we are going to assign this to the value and we can go to the date picker and mention the value as value so if I go back to my browser I'll see some error here which is a very common error because the thing is there is a catch here we have assigned a current date to the date picker component but actually before assigning the date to the date picker component we have to pass it using DJs and that's the reason we have imported DJs because this date picker component works with this DJs module so before assigning this date I'm going to wrap it with a DJs function and then assign it to my US state variable if I save this now I should be able to see now all the errors are gone on the browser and if I refresh it you can see that the default date it has selected on refresh is the current date as you can see on the screen the current date is 13th of April so now what we have to do is we when we change the date and when we click on book an appointment it should be able to give us some kind of message that the appointment is booked on this date so to do that we are going to go back to the date picker component and we are going to men what should happen on change of date so on change I'm going to say that my new value as soon as I change something on the date I'm going to set my value to new value so that's going to happen as soon as we change something here we change the date here the value is going to change to the new value that user has selected from there we can also do one more thing here so as soon as somebody clicks on the button here I'm going to create a new function and this function is going to be handle click so as soon as somebody clicks on this button this function is getting called and that is handle click so we'll go above the return statement and create a function that is handle click so we have a handle click function here so inside the handle click what I'll do is as soon as somebody clicks on the button I'm going to alert the value so whatever the value is I'm going to alert it to the user so let's save it and see what happens on the screen so if I refresh it so my current value is the current date and that's what we have set in the state variable so if I click on book an appointment I'm able to see that the current date here now if I let's say if I change something here if I make it 18th of April and book an appointment I'm able to see that my date has been changed to 18th of April and how this is working is because as soon as I change a date on my date picker we have a function that sets a value to the new value that whatever user has selected and as soon as somebody clicks on a button we are alerting the value which will be the actual value that user has selected from the date piaker so here we can make some improvement in the the alert so in the alert I'm going to just mention some text here so what I'll say in the alert is I'll write a text your appointment has been booked on value value is going to be the whatever date user has selected from the date picker now let's save it and see on the screen so I'm going to refresh my application again and I'm going to book an appointment on the default date now it says your appointment has been booked on this date and if I change the date here to 18th of April if I book an appointment now it says your appointment has been booked on Thursday 18th of April and it's also showing the time so this is how we use a date picker component in our application so I have just shown a very basic example here but you can use this component in any of your application in whatever way you want so I'll be leaving a link to my GitHub for this project and do check out that link if you want to reuse this code in any of your applications I'll see you in the next video

Channel: Mitter - Your Tech Mate

Views: 196

Keywords: react js, material ui, material ui react, mui react, material ui datepicker, mui datepicker react, material ui tutorial for react, material ui tutorial, material ui tutorial for beginners, material ui tutorial 2024, react js tutorial, react js project

Id: AVEtiJ5wysk

Length: 10min 23sec (623 seconds)

Published: Tue Apr 16 2024