[DatePicker] Make possible to hide year view

[LukasDeco]

Hi Material-UI-Pickers team!

I love your date picker, but my app has a special use case.

My app allows people to set occasions for family and friends, like birthdays, holidays, etc. I don't want them to actually be able to select the year, just month and date. Once they select a month and date, the app will just take into account what today's date is and act accordingly.

So I really want a mode for the DatePicker component that only allows users to select day/month. Is this possible? I would love to contribute to the project and submit a PR for this if you would prefer.

Thanks!
Lukas

[dmtrKovalenko]

I see, for now it is not possible, we will extend views functionality to make it works as expected

[dmtrKovalenko]

Fixed in 3.0.0

[hilwat]

@dmtrKovalenko @LukasDeco
Maybe this is a workaround see right
https://material-ui-pickers.dev/demo/datepicker

[LukasDeco]

I know this is marked as closed, but I still don't see the datepicker hiding the year from the view when I use : views={['month', 'date']}

Is there something I am missing?

[psamim]

@dmtrKovalenko Me too. I do not see the effect of views prop on the date picker. Any other things needs to be configured?

[TomekStaszkiewicz]

Hello! I know that almost a year has passed since the last comments, but I try to use views={['month', 'date']} but it does not work as expected. I can still see the year there :( How can I create a picker with only month and day selectable? Did you manage to solve that issue @LukasDeco @psamim ?

[oliviertassinari]

@TomekStaszkiewicz Do you have a reproduction with v4.0.0-alpha.8? Do you want to open a new issue?

[sdankel]

Could we reopen this? This is not fixed. The repro is simple:

    <LocalizationProvider dateAdapter={AdapterLuxon}>
        <DatePicker
          views={['month', 'day']}
          label="Month and Day"
          minDate={'01-01'}
          maxDate={'12-31'}
          value={value}
          onChange={(newValue: string | null) => {
            setValue(newValue);
          }}
          renderInput={(params:any) => {
          return <TextField {...params} helperText={null} />;
          }}
        />
</LocalizationProvider>

This shows the current year by default. Expected: No year shown.

[alexfauquette]

@sdankel The issue is about allowing to hide the year view (a view where years from minDate to maxDate are listed)

From your example, I assume you expect to hidde the year in the input. Which can be done with the inputFormat prop

inputFormat="MM-dd"
https://codesandbox.io/s/peaceful-water-ptyrdc?file=/demo.tsx

[sdankel]

@sdankel The issue is about allowing to hide the year view (a view where years from minDate to maxDate are listed)

From your example, I assume you expect to hidde the year in the input. Which can be done with the inputFormat prop

inputFormat="MM-dd" https://codesandbox.io/s/peaceful-water-ptyrdc?file=/demo.tsx

Thanks for sharing the sandbox, @alexfauquette

This is a screenshot from the sandbox:

You can see that the year still shows up when you click on it. My hope is to have a date picker that is year-less.

[LukasTy]

@sdankel You are referring to the calendar header and ability of changing it.
We have an issue ready for it: mui/mui-x#6653
We just need to find time to tackle it. 👌

[alexfauquette]

By the way @sdankel you're on material-ui-pickers repository. To get the improvements, you will have to migrate to @mui/x-date-pickers which is has currently a v5 stable and the v6 is on the road (currently in beta phase)