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

**URL:** <https://community.glideapps.com/t/css-magic-to-make-the-date-picker-more-useful/26983>\
**Category:** Ask for Help\
**Created:** [May 19, 2021, 3:24pm UTC](https://community.glideapps.com/t/css-magic-to-make-the-date-picker-more-useful/26983 "2021-05-19T15:24:22Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [May 19, 2021, 3:24pm UTC](https://community.glideapps.com/t/css-magic-to-make-the-date-picker-more-useful/26983/1 "2021-05-19T15:24:23Z")

</div>

Courtesy of @Manu.n - star work!

Existing UX for picker

 ![Screenshot 2021-05-19 at 10.48.55](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/e/6e3c0ced195ab9907b6f777e3e974736552ebbbf.png)

and the Manu way

 ![Screenshot 2021-05-19 at 17.23.36](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/d/fd43dcc440eb9787c2848a11c0a802c649ba1b75.png)

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [May 19, 2021, 3:25pm UTC](https://community.glideapps.com/t/css-magic-to-make-the-date-picker-more-useful/26983/2 "2021-05-19T15:25:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 19, 2021, 3:25pm UTC](https://community.glideapps.com/t/css-magic-to-make-the-date-picker-more-useful/26983/3 "2021-05-19T15:25:47Z")

</div>

Damn this looks good.

---

<div class="post-metadata">

**Author:** ![adriasoce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adriasoce/32/24153_2.png) [@adriasoce](https://community.glideapps.com/u/adriasoce)\
**Post date:** [May 19, 2021, 3:25pm UTC](https://community.glideapps.com/t/css-magic-to-make-the-date-picker-more-useful/26983/4 "2021-05-19T15:25:57Z")

</div>

Amazing!!!

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [May 19, 2021, 3:32pm UTC](https://community.glideapps.com/t/css-magic-to-make-the-date-picker-more-useful/26983/5 "2021-05-19T15:32:39Z")

</div>

Always remember to give your columns meaningful names 😂

 ![Screen Shot 2021-05-19 at 11.31.08 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/2/e2a9278ffa0da60799851ed0e67dd17c04fd8c22.png)

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 19, 2021, 3:40pm UTC](https://community.glideapps.com/t/css-magic-to-make-the-date-picker-more-useful/26983/6 "2021-05-19T15:40:38Z")

</div>

🤣 hahah `tp-almost-never-used-date-picker`

PS: it’s joke lol

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 19, 2021, 4:21pm UTC](https://community.glideapps.com/t/css-magic-to-make-the-date-picker-more-useful/26983/7 "2021-05-19T16:21:24Z")

</div>

uhm it misses the tail to “May” 😃

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [May 19, 2021, 4:35pm UTC](https://community.glideapps.com/t/css-magic-to-make-the-date-picker-more-useful/26983/8 "2021-05-19T16:35:32Z")

</div>

I did notice that…

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 19, 2021, 4:43pm UTC](https://community.glideapps.com/t/css-magic-to-make-the-date-picker-more-useful/26983/9 "2021-05-19T16:43:30Z")

</div>

Here is a small correction

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

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [May 19, 2021, 7:17pm UTC](https://community.glideapps.com/t/css-magic-to-make-the-date-picker-more-useful/26983/10 "2021-05-19T19:17:03Z")

</div>

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 🙂

 ![Screenshot 2021-05-19 at 21.15.11](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/6/0662908c14f00fe3186c004cb76a0d7171f2caed.jpeg)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 19, 2021, 11:19pm UTC](https://community.glideapps.com/t/css-magic-to-make-the-date-picker-more-useful/26983/11 "2021-05-19T23:19:13Z")

</div>

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