[Datepicker-Simple]: Require an option to remove year from the calendar.

[Monika-Jayanna]

The problem

I am using the following design in our application https://react.carbondesignsystem.com/?path=/docs/components-datepicker--simple and its working fine but as per our business requirement we need to remove the year option we tried with changing the date format option but it still requires an user to give Year option, So we need an option to remove the year from calendar.

The solution

So it would be very helpful if we get an option to completely remove year month and date in date picker component, based on our requirements from the user perspective interface.

Application/website

https://www.ibm.com/privacy/portal/us-en

Business priority

High Priority = pressing release

What time frame would this ideally be needed by (if applicable)

No response

Examples

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate issues

[abbeyhrt]

Hey @Monika-Jayanna! It looks like you can update the dateFormat and placeholder to remove the year from the DatePicker. The year still shows up in the dropdown calendar but it defaults to the current year. Here is a code example to show what I mean: https://stackblitz.com/edit/github-j7hrws?file=src/App.jsx does that satisfy the business requirements you are looking for?

[Monika-Jayanna]

@abbeyhrt Yes we have tried this but we do not want to show the current year also it should not display the year in anywhere of the calendar and we are not using date ranges in our application, We are just using the simple calendar with only one input option of date picker component. And one more thing we have observed is when we have removed the year option from date format it was giving an validation error to match with the format even though we were not using the validation option.

[Monika-Jayanna]

Hi Team, Could you please give the status/Update of this ticket

[mbgower]

You could also achieve this by restricting the date to a specific year using min/max, as in this example from MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

It's still going to display the year, but it will show as disabled and be non-interactive. IMO, this is a more prudent thing to do than hiding the year, which could cause unanticipated issues for users. There may be edge cases even within your use case where a user does need an ability to review a stored date or traverse the period between December and January.

Note that I haven't seen what setting a range of only one year does with Carbon. I'm just citing a default html date input

[mbgower]

Note that in a calendar implementation, the unavailable dates show as greyed out, and the calendar cannot navigate past the start or end month

Similarly, if you try to alter by year, it just gives you months to choose.

The value of this is it is wholly predictable by users and has been in place for decades, so has been vetted and will be familiar to many.