Styling and Configuration Difficulties and Inconsistent Documentation

[neilchaudhuri]

I am attempting to style a DatePicker so it approximates this specification:

I have figured out some of it, but I am having issues with the following:

• No Today, OK, Cancel with variant inline
• Unable to remove that toolbar and create a simple year dropdown. The sample code has no configuration for it, but there are multiple examples that look like this

• Unable to configure the border color on select and a leading icon for the input. The renderInput prop described in the documentation is unavailable per TypeScript, and it is ignored in Storybook. Meanwhile, TextFieldComponent described in the documentation doesn't produce a calendar display when clicked.

Any guidance on these configurations--or an indication they are impossible--would be appreciated.

[oliviertassinari]

It seems that you are referring to the v3 version of the component. Note that we only support v4 going forward.

[neilchaudhuri]

I simply followed the installation instructions in the documentation, so you're saying that isn't valid?

[neilchaudhuri]

OK, just checked NPM. Looks like the change made 12 days ago is for v4.0.0-alpha.8 but 3.2.10 is the latest stable. I will see about making a PR to update the documentation to clarify that the stable version is no longer supported.

[oliviertassinari]

I meant that we have moved all efforts to https://next.material-ui-pickers.dev/.

[oliviertassinari]

I will see about making a PR to update the documentation to clarify that the stable version is no longer supported.

Same with the main repository, we have moved all efforts to v5: https://next.material-ui.com. We also plan to merge the pickers into the main repository, before the stable release of v5.

[neilchaudhuri]

I upgraded to the alpha, and I have found some things more aligned with my objective and others not so much:

• Unable to add an outline of a specific color (that changes on focus)
• Unable to add color to the trailing icon (let alone make it a leading icon but that's less critical)
• Unable to really style anything much at all as my style object isn't changing the default. Here it is:

const customTheme = createMuiTheme({
    overrides: {
        MuiPickersToolbar: {
            toolbar: {
                backgroundColor: "#0071BC",
                color: "white"
            },
        },
        MuiPickersCalendarHeader: {
            switchHeader: {
                // backgroundColor: lightBlue.A200,
                // color: "white",
            },
        },
        MuiPickersDay: {
            day: {
                color: "#212121",
                fontFamily: "'Open Sans', sans-serif",
                backgroundColor: "white"
            },
            daySelected: {
                backgroundColor: "#0071BC",
                color:"white",
                borderRadius:"20px"
            },
            dayDisabled: {
                color: "#E4E5E6",
            },
            today: {
                color: "#212121",
            },
        }
    },
});

And

<ThemeProvider theme={customTheme}>
            <LocalizationProvider dateAdapter={DateFnsUtils}>
                <DatePicker...>
            </LocalizationProvider>
</ThemeProvider>

[oliviertassinari]

@neilchaudhuri Now, you get our interest :). Do you have a live reproduction we could dive into?

For context, even though we had a date picker one year ago, we had a lot of people that were asking for an official one: https://medium.com/material-ui/2019-material-ui-developer-survey-results-c9589434bbcf (date picker number one 1). I think the result can simply be explained by the fact that developers weren't happy with the state of affairs. I think that we took the right decisions and took the right direction to remedy the problem (hiring @dmtrKovalenko to work fulltime on the picker 6 months ago, working on a merge with the main repository mui/material-ui#19706, involving myself). We are probably >50% done on this path. It's taking much more time than anticipated but quality software doesn't happen overnight. We are still iterating on customizability, so this issue will greatly help.

[dmtrKovalenko]

I suppose for this kind of customization you probably need to use internal components like Calendar and build your own version.

There are a couple of reasons for that:

1. So hard customization mostly always leads to the problems when the inner structure changes
2. It is becoming harder and harded to change something new.

I suppose that you could use our internal Calendar component to build your own version of wrapper

[oliviertassinari]

At this point, considering the main point raised by @neilchaudhuri, it seems that we can push the discussion further on how we can improve the CSS structure, to make it easier to customize.

[oliviertassinari]

I'm adding a docs label. I think that we can aim to provide such customization demo. It will force us to dive into the pain points, and hopefully make improvements. Linking it to mui/material-ui#20960

[Jesusz0r]

Hi @oliviertassinari. Do you know how can I style the "OK" and "Cancel" button? I'm using createMuiTheme but can't seem to find the right way to access it

[oliviertassinari]

@Jesusz0r Is styling the Button component directly (globally) enough? What else do you need?