[Bug]: Date picker does not show full month name and year

[cmorgancli]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

The date picker does not show the full month name and year.

Current Behavior

The space allocated for the month name and year are not sufficient

Expected behavior

I expect the complete month name and year to display

Possible Solutions or Causes

This might be as simple as modifying the .datepicker-controls css width properties for the month and year selects

Steps to reproduce

You can see this bug right on the Materialize website https://materializeweb.com/pickers.html . Just activate the example date picker.

Your Environment

• Version used: 2.1.0
• Browser Name and version: Chrome, Firefox, Safari
• Operating System and version (desktop or mobile): MacOS, iOS,
• Additional information you want to tell us:

[cmorgancli]

Workaround css:

.datepicker-controls .select-year input {
width: 80px;
}
.datepicker-controls .select-month input {
width: 110px;
}


[Jerit3787]

Hi, does this works well on multiple screen sizes? If this works well, we can make a pr for this.

https://github.com/materializecss/materialize/blob/dda2c95aee0cadbba52c1cb726214d6ef8131e8b/sass/components/_datepicker.scss#L41C1-L47C4

 .select-year input {
    width: 50px;
  }

  .select-month input {
    width: 80px;
  }

In the code, the width is fixed as well and would be a good start to edit it.

[cmorgancli]

Even with my workaround it isn't perfect on the smallest phone sized screens. The data displays, but it isn't centered. I think the issue is that .datepicker-modal has max-width: 325px;. I don't need to support a screen smaller than a modern iPhone, so I'm ok with it.

[gselderslaghs]

This seems to be caused by the dropdown input selects to inherit styling from the input fields styling, basically caused by the padding of the global input fields styling. Proposal to override styling for those fields on the Datepicker object @see CodePen: Materialize - Date picker full month name and year
Solution is working on all screen sizes

[cmorgancli]

I tested that solution and agree it's better than my original workaround. Works on every screen size and looks great!

[ginosanterre]

Do you know if this bug will be fix?

[gselderslaghs]

Do you know if this bug will be fix?

I have added a commit and pull request (#536) that addresses this issue. Until merged you can still use the workaround by adding the next coding snippet to your custom CSS

.datepicker-controls .select-dropdown {
  padding: 0;
  vertical-align: middle;
}

.datepicker-controls .month-prev,
.datepicker-controls .month-next {
  height: 49px;
}

Working example:

... CodePen: Materialize - Date picker full month name and year ...

[gselderslaghs]

Closing as implemented and validated, works as expected