CSS magic - to make the date picker more 'useful'

Courtesy of @Manu.n - star work!

Existing UX for picker

and the Manu way

<pre><span><style>

/* Month (Mai 2021) */
.MuiPickersSlideTransition-transitionContainer > * {
font-size: 1.5em !important;
margin-top:-5px;
}


/* Year & Day */
.MuiPickersToolbarText-toolbarTxt  {
font-size: 2.125rem;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
line-height: 1.235;
letter-spacing: 0.00735em;
}

/* Day only */
.MuiTypography-h4 {
font-size: 1.8rem !important;
}

</style></span></pre>

7 Likes

Nice!
I’m going to test that in one of my apps right now.

1 Like

Damn this looks good.

Amazing!!!

Always remember to give your columns meaningful names :joy:

6 Likes

:rofl: hahah tp-almost-never-used-date-picker

PS: it’s joke lol

1 Like

uhm it misses the tail to “May” :smiley:

I did notice that…

Here is a small correction

/* Month (Mai 2021) */
.MuiPickersSlideTransition-transitionContainer > * {
font-size: 1.5em !important;
margin-top:-5px;
}
1 Like

And happy mistake-free users at last!

Turns out that a small year was invisible, but a big year… its obvious!

I am very grateful to @Manu.n and to everyone else in the community - pushing the boundaries of what is possible :slight_smile:

2 Likes

Thanks, I updated the code in the original post @Manu.n @Mark_Turrell

2 Likes