42. React Material UI DatePicker | MobileDatePicker | DesktopDatePicker | Dr Vipin Classes

foreign s welcome to my channel a channel for learning simple coding if you find this video to be helpful please like share and subscribe my channel in this video we are going to learn one more Advanced component is called date picker if you see that in material UI website earlier this date picker was the part of lab library that we have installed earlier for loading button but now it's shifted to in two part one is commercial if you want to take license then we have a professional pro version otherwise we have X date picker as a free version here so we are going to use free version but if you want to use your date range picker date range picker Day date range picker desktop date range picker mobile date range picker static date range picker then you have to install a prop version of this otherwise we having a free version so we are going to install free version and going to use free version also so how we can install it we can install like this so we try to install it for installing it again I just to open command prompt and I go to the directory where we have the package and I say npm I then I say mui I say x date picker extent Pickers like this so I have to install it it is installed now so you can see this also under the package we have date picker installed close it now we try to use this date picker for that what I have to use I have to use so many components so first of all one more thing I want to tell you that if you want to use date picker and you see that if you want to use this state picker then you have to download you can say if I go to date picker then we have to download some adapters also so how this adapter will stall that I am going to explain you you see that we have these adapters also four types of different libraries are available for adapter like we have days.js date FNS moments so these are the luxons that these are the library that is required to fetch the date for that we have to install this also so I am going to install this one also that is days so that I am going to use so how we can install it you see that we have to convert this days so you will have to add this also I need to npm so I go to this and I have to use npm install days DJ D JS also like this we have to install if you want to use moment you can go for a moment if you want to use date app and you can go for date FN you have to decide which adapter you want so I want this deal date yes so I'm using this and I am going to once again install this also open command prompt and go to the directory and PMI and I say dgs like this I have to install it done so I can close it once again I can check if I want to see so I have this Library also here now we are ready to use this so first of all I have to import here localization provider localization provider that I need from mui date picker slash localization provider like this I need this then I need import then I need a adapter so I say adapter adapter DJs that I require so I need it from again mui X date picker and here I can type at a so automatically will come what adapter you want to use I have installed the library adapter dgs so I will use this same I will put the name here then I try to use one more import that is date picker so I say date picker like this and from I need to use it again the date picker library and I say it here that is date picker like this I have to use it now for that remember that here uh I need a localization component first of all so I try to use here localization provider like this under this component I have to use date because for that I need to pass here date adapter also so I say date adapter that adapter is adapter DG like this this adapter I need to pass here and inside this adapter I will use date picker this date picker I want to use here remember that if I try to see this so refresh it no result I have here right now you see because these component does not work these component does not work with this you see it is not running right now but I try to show here date picker also how we can use it so for date picker I need a text field also so I just try to use this first of all I pass here label and in a label label and here I pass I said select date like this then I say value of date and I say here date for example then I say on change means if you change some date then I have a new new date here so I can say ah here the date I will put it a value and here I say new value it will come and this new value I will pass here in set value here I pass new value like this so what is value and new value these are the state variables so I say value set value we have state variable we have used state and here I pass null first of all and I can import use State also so I say here under the react I see use state like that now I need to pass here render input also so I say a render input and here I need to pass the function in this I pass props all the property and under this function here I need to pass a text field so I say text field like this and this text Field have all the props like this and I need to close it now save this so all the props which coming from here property will pass to this text field now I try to see this you see everything is coming it is also coming now it is also coming now because we have set the all the configuration required for this and you see we have a selected if I click here so we have this option I can select any date and this date will come here like that we have the date picker now we have some variety of date picker also like we have a simple date picker here and you see that in a website you go here so I go to the date picker here in this date picker we have a simple date picker like this we have used all the properties now we have static date picker also and in place of static you see we have a static dead picker also like this and same we have to use this so what I have to do this just copy this here paste it once again and in place of this I put the static dead picker and here I can import one more date picker it's called Static one so I say here static date picker and from static save this and you will see that in a static date picker we have one more date picker like this you see this is the static date picker is coming here like this some type of this type of configuration or layout we have but we have to set some property also like I have to pass here this property this property open to in which you want to open to ear or display static wrapper as so I copied these two property and this property we can also set here it means I want to open the desktop mode here or I can open mobile mode also so first of all I see the desktop mode you see in desktop mode we have like this if I click on this you see we have default same we have like this if I want to open in a mobile mode so I say in place of desktop I say mobile mode save this and you see we have a mobile mode like this earlier was a mobile mode it means mobile phone you can open like this by default mode is mobile but you can use it as a desktop save this desktop mode you see we have a desktop mode but if you don't like this means we having some problem in a static type of date picker we have a more date picker also those are more valuable or more useful also those are responsive also we have a mobile date picker and desktop date picker individually we can use this so how we can use this that we are going to see here you see that I copy this or I can change it in place of static I say here mobile date picker and no need to uh no need to pass here this property because it is work only for static open here no need to do this also no and we have to import here in place of the static I say mobile here also I say mobile and I can also use with this desktop copy this paste this and separately I say here desktop here also in place of mobile I say desktop save this and this is mobile so here I type like this Isa mobile date quicker save this and if you see the output we have mobile date picker we do not have this save icon type of thing because it's a mobile you have to click on and it will show like this like this then we have one more that is desktop so just I copy this and paste it and here you have to pass desktop date picker like this and you see we have a desktop type of this also but you see that in desktop picker I just change the name to desktop save this and now you see by default is this look like a desktop we have a mobile like this you see we selected date and all data selected like this we have this desktop but you see that in Mobile mobile date picker we have a extra button of cancel and OK also like this but here in this we do not have this button and you see by default we have this option we can option we can change these option also we can say here like in desktop open to I say open to I say ear open to here save this so if you see now I click here and you see that we have a year options here then we have the day then select so we can change also this what kind of output you want you want here or you want day or you want month and not only that we can also decide that what we want to display here we want to display complete here or we want to display only year or day so that we can do here in a simple one any one anywhere we can use but here I just give you example I say view views and here under the views I say here I want year only save this and you see that if here here is display only if I click then open to ear and I said and I click here I say 2026 and you see here is display only but if I say to month so if I say month and year yeah this is coming now you see month November and year is coming like that you can select this and we have this month and year so like that way we can also change the view we can have the property value and change we have rendering effect we have open to and we can also control the mean and max value also for that so I suppose you have here and I click here so everything is open means we have all the years and all everything is open but I want minimum should be uh minimum should be 2022 so I say mean date mean date here and in this mean date I say DJ like this and under this DJ I want to pass the year I say 2 0 2 2 and I say I want only month is Feb date is 22. that should be the minimum this DJ I have to import so I say import DJ from DJ like this we have installed this Library also so we have passed here mean date 22 if I click you see this is red because the date is 2018 so I just you see data is not coming now so I have to reach to the above date more than 22 so I go there I said 2023 notes you see the color is change but if I go to 2022 so the minimum 22 is there and we have the minimum Feb you see Feb 22 Feb so before that I can cannot select this state you see all are disabled only after 22 I can select you see so how it is checking this it is checking from this property mean date like I can set max state so this by this way you can use these date picker mobile date picker desktop date picker and static date picker so these are the date picker those are part of advanced material UI components that has the available in X date picker library that is not a part of core library of material UI so that's all about date picker in next video we will see time picker also thank you for watching this video if you like it please do subscribe [Music]

Channel: Dr Vipin Classes

Views: 8,524

Keywords: Dr Vipin Classes

Id: 5t6gWvUMw0A

Length: 17min 30sec (1050 seconds)

Published: Fri Dec 02 2022