The Ultimate Guide to Using and Styling the MUI DateTimePicker

hello and welcome to another episode of the clever dev today we're going to explore the mui date picker and date and time picker pretty much the same thing we're going to explore some of my favorite props and customizations through the props uh we'll explore how to swap out some of the icons and as you can see we are going to customize it exactly how we want to stick around here we are again and i have removed the styling and the props that i want to show off from the day picker in the date time picker so let's go into the code here and i do have as usual quite a bit of default or setup code you could say got all my imports and have some my change handlers and things like that that's not really the focus of the video so i like to save some time and get all that set up i will have a link to all this code to a post that has all this code in the video details so if you want all this code you can check that out however what i want to show you is some of the props in this desktop date picker and then how to swap out icons in the date time picker which those two components are very similar i'm just showing a little bit from each one and then also you can see i've got some setup here for some customization so interestingly i'm not gonna just directly use the sx prop but rather pass it in uh to some of these props on the daytime picker so that the sx styling can trickle down to the appropriate composing components of the daytime picker so let's start with this desktop date picker up here so there's two really cool props that i want to show off actually before we get into that i also want to call out that mui just recently moved the imports from mui lab to mui x state pickers so if you're struggling with the imports keep that in mind i also had to um install djs directly and i didn't have to do that before and that's just in the last couple months that they made that move that mui moved that so just keep that in mind so with that said let's dive into the props here that i want to show off so the first one is a really cool one called views so let's look and see what we have here we have the days and the years um not seeing a way to get into the months by default so let's see if we can change that so i'm going to add this views prop and it accepts an array actually an array of strings so i'm going to change that to day and month and you could see there was it looked like there was also a year value there that it would have accepted the day month year so anyway i'm just going to swap it to day and month let's see what the difference is there so now i drop that down cool so instead of years i get the option for months so that's an important one so the other one that i'm going to show just on this desktop date picker here is i am going to show a prop called literally show days outside current month so what's important about that is you see that there's no days here so i can't when i'm looking at july 2022 and obviously today is july 27th if you couldn't tell when i'm recording this anyway i can't select dates from the end of june or the beginning of august however that's the default however i can add show days outside current month and it's just a boolean so don't need to do anything more than add it and there you go you probably saw that flash on there that pop up on there so now i can add and now i can select those days from a previous month so i personally like that setting and um i'm going to leave it as as that so there used to be another prop before they made the move to lab and it was called clearable but it's gone would have added a little clear button at the bottom of this anyway i mention it because it's possible that i have just missed were they that maybe it's still a potential prop that you can use but that the name is slightly changed um if you look at the post that i wrote then back when i wrote it in april of 2022 then that prop was available so you'll see it there but anyway if they kept it i don't know where it is i kind of liked having it it was a nice clear method for clearing out your date or time picker so anyway let's move on to the date picker here and hit the styling on that so before we jump into the sx styling i want to show you that you can pretty easily change out the icons so i've imported a couple icons i'm going to change um this will be done with this one i'm going to move on to this one i'm going to change this calendar icon here and then i'm going to change these arrows why i'm going to do that just because so just to show it's possible so anyway interestingly those are housed under this components prop and then we can do our open picker icon and vs code's helping me out quite a bit here calendar month icon so let's just swap that out see what happens here and you can see the difference in the icons now so i've only added it of course to this bottom one and let's do another here actually i'll go ahead and do both the remaining ones left arrow icon and i will change that to arrow icon left just kind of like a simpler icon instead of looking like a chevron it looks like literally excuse me arrow left icon vs code didn't help me out enough it'll look literally just like a little arrow so there we go that should be everything that we need to get those icons in here so you can see it's hard to tell the difference but now they look like this down arrow over here i'll show you the difference on this one they used to be the chevrons so uh that's that for the components now i've got the input props on here and um so there's two things going on the popper is what opens when i expand this the input is actually this component here so a lot of these a lot of components in mui are i call them compositional components and what that means is for example date time picker is composed of the popper that we just saw it's also composed of this input which we have this render input and we're saying via text field we're saying that this is going to be a text field so that's what this input portion is composed of is a text field component now text fields are composed themselves of multiple other components like a label literally an input and some other things in this case we've told it to or by default it has an icon i i think in the text field it's called something like endadorn icon or end adornment icon or just end icon i forget but i have of course another post on text field altogether that has um that icon in there so anyway input props what we want to do here is i'm going to get the calendar icon here styled i'm just going to make it a nice blue color so to do that notice the syntax here there's always curly braces for any prop then input props is accepting an object inside of that object it has one field the sx field which is going to be passed down as csx prop sx itself accepts an object so this object is going to be the value the styling props we want to add in this case it's actually going to be a little bit more complex because it's going to be a nested component so there we go mui svg icon dash root and i'm going to pass in color blue and let's take a look at that there we go so how did i know what nested selector here well mostly because i did my research beforehand but we can figure it out looking in here so probably somewhere within this icon here we have mui svg icon root so you can see that that is living somewhere inside of this input so now i can go and show you that this input um ultimately it's wrapped in oh that's the one above anyway here we go this text field this input for the date time picker is this div right here which has class mui form control root so the top most compositional component in mui of the text field is this form control so anyway just using the nested selector to have to select this svg element way down inside of it so there's that one the popper i've already got a little bit set up i've just created a const but it's actually empty right now but anyway it's the same thing where the popper prop accepts an object within that object we the object has a field of sx and we're giving that field a value of popper sx so anyway let's go add some values to this popper sx i have typescript enabled so i had to import sx props and yeah let's take a break and actually mention that right now so i had to import sx props i also had to set my date to be either a date value or a null value for the state value here um i've got a little example of if i'd have passed in a string version of a date instead of just like the current time and then one other thing that i had to import is text field props i had to import that to appease typescript so anyway let's add some proper sx values here so i'm going to add quite a bit here i'm going to target the paper component inside of the popper and i'm going to target the uh a class called calendar picker root and uh quite a bit i'm going to target something called private pickers slide transition and pickers day and picker and an mui tab in there so quite a lot going on so let's get into it oops and you always start out with that and in this case it's got a space because i'm going to select a child inside of the popper so here we go i've got my border 1px solid black and i've already dug into the styling sum so i'm going to kind of fly through what styling i'm adding and let's just see what i really care more about is that you know how to add the styling i care that you know about proper props and that we maybe explore some of these classes that are being applied by default in the dom um anyway so you can see that border there and it's got some padding and margin now that didn't exist so let's see if we can find it's always sometimes it can be hard to select poppers um but anyway this one was behaving itself so here we go we've got um this is the root of popper which is where sx props got applied to so that's important to know so i could have added um i didn't have to start with the nested selector i could have added some kind of prop like background color here perhaps and that would have applied at that root level so anyway we saw this mui paper route um there's a whole bunch more inside of here though there's that my calendar picker root that i mentioned so let's actually target that next and we can just give that some background color and let's see so there we go so i had paper which is a child of the root but a parent of this calendar picker that i targeted just now the paper has a little bit of padding so that padding is what we can still see here with its own background color it's it's still showing visibly showing the background color that we gave to the paper so anyway the background color i just added is on this mui calendar picker so um yeah there's this there's a little bit of transition applied and obviously we can see that here so let's go in and target that and actually let me take a look at that class name again let's dig in here because i don't so there's a fade transition group there's actually a slide transition here we go i'll actually target that one and then yeah i think that'll be the last child that we target here and one handy thing is you can just go into your dev tools here and pull it right out slide transition route um what do you think about this whether i want to actually target anything there you know i think i'll just leave that one you can see that as an example if you want i'm gonna actually go into the days here see if i can just target one of them so that's within that slide transition route okay so we've got mui picker day root pickers day route so let's go ahead and target that and we always got to have our syntax correct in here so let me see what i okay i think i'm actually going to target we could probably target that picker's day route i'm actually going to target this day with margin it looks a little more specific to me so i bet that we won't accidentally pick up or style a class that we were not intending to style so i will add some color there and let's say rgb um of two two nine two two eight two two six who knows what that is and then we'll add some background color and let's see oops it's good to keep your single or double quotes consistent but it doesn't really matter and 153 so let's see what that did okay interesting okay there we go so i added a little bit of a darker blue color there so pretty cool so there we've wrapped up our styling of the day picker here and there's still more things that we could dig into you could style these labels here they are little typography components all kinds of things that you can style within these composed components because there's just a lot going on anyway i hope that this video was helpful and please do consider subscribing it's really motivating to me and i hope that you have a wonderful rest of your day

Channel: The Clever Dev

Views: 20,251

Keywords: mui, material ui, mui datepicker, mui datetimepicker, material ui datepicker, style mui datepicker

Id: 95Tyz7AzBMc

Length: 16min 51sec (1011 seconds)

Published: Thu Jul 28 2022