Date Picker Style

Ask for Help
1

I’ve had some bad experiences with the date picker from users. They can’t seem to figure out how to change the year. They move back one month at a time, which takes a long time. How can I make a custom date picker that is a bit more user friendly?

Screenshot 2022-10-29 at 11.05.11

2

I use the following CSS, which makes the year selector more obvious:

<pre><span><style>
/* Month */
.MuiPickersSlideTransition-transitionContainer > * {
  font-size: 1.5em !important;
}


/* 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;
}
3 Likes