[pickers] Add Support for displaying Julian Date on Date Picker

[AnthonyLaurio]

Summary

Currently when displaying the date using the Date Picker component there is no way to display the current day of the year (Julian Date). Previously in MUI Labs v5 you could use inputFormat: "DDD" to display the day of the year. This does not seem to be supported in MUI-X 7 Date Pickers as the same format string now displays the day of the month twice. We are using the Localization Provider with the Moment Adapter.

Examples

https://mui.com/x/react-date-pickers/adapters-locale/

<DateField
label="Date Field"
format="MM - DD - YYYY [DDD]"
defaultValue={dayjs('2022-04-17')}
/>
Should display: "04 - 17 - 2022 [107]"
Actual display: "04 - 17 - 2022 [1717]"

Motivation

I work in an industry that utilizes the day of the year (JDate) for standardization across teams which makes it important to be able to easily reference it when selecting a date. This is a feature that already exists in our date pickers being used by our users and would require us to develop a custom work around to upgrade from MUI Labs 5 to MUI X 7.

Search keywords: Support, JDate, Julian Date, J Date, Date Picker, MUIX, MUI-X, Add, Feature

[alexfauquette]

The 1717 is because our format parser only knows D and DD tokens, so it translate DDD as a token of DD next to a token D.

To clarify, is the [DDD] section supposed to be editable?

[LukasTy]

@AnthonyLaurio, could you clarify Alex's editing question? 🤔
We support a subset of format elements because each of them has to play with the custom field component that we are using.
The day of the year section can't easily work with other sections because we are not changing other sections than the one you are currently editing, this means that editing a day would not change the day of the year.

If you don't need that specific section editable, have you considered passing it in as an adornment?
Here is a demo doing just that.

[AnthonyLaurio]

The 1717 is because our format parser only knows D and DD tokens, so it translate DDD as a token of DD next to a token D.

To clarify, is the [DDD] section supposed to be editable?

Apologies for the confusion. No, the [DDD] section does not need to be editable. It should just be if I select a date with the DatePicker it should then display both the regular date and the JDate/day of the year in the date field.

@LukasTy I have not tried the adornement route! I'll check that out as it might fill our need for now. I brought this up because DDD in the format string works with our current DatePicker using MUI Labs 5.X.X but when we swap it out with the date picker from MUI X 7 it no longer works. Wasn't sure if this was something that just wasn't supported yet and is in the works or if the token had changed since labs and I just couldn't find the right one since MUI X seems to be the successor to MUI Labs.

Thank you both for your responses!

[LukasTy]

I brought this up because DDD in the format string works with our current DatePicker using MUI Labs 5.X.X but when we swap it out with the date picker from MUI X 7 it no longer works. Wasn't sure if this was something that just wasn't supported yet and is in the works or if the token had changed since labs and I just couldn't find the right one since MUI X seems to be the successor to MUI Labs.

On v6 of @mui/x-date-pickers we have introduced the notion of field components which are the evolution of the input element for date entry.
It's one step closer to being closer implementation-wise to the native date input.
This implementation requires way more custom handling, thus we have narrowed down the most popular tokens/formats that we support for now.
Any new token support needs consideration.

[AnthonyLaurio]

I brought this up because DDD in the format string works with our current DatePicker using MUI Labs 5.X.X but when we swap it out with the date picker from MUI X 7 it no longer works. Wasn't sure if this was something that just wasn't supported yet and is in the works or if the token had changed since labs and I just couldn't find the right one since MUI X seems to be the successor to MUI Labs.

On v6 of @mui/x-date-pickers we have introduced the notion of field components which are the evolution of the input element for date entry. It's one step closer to being closer implementation-wise to the native date input. This implementation requires way more custom handling, thus we have narrowed down the most popular tokens/formats that we support for now. Any new token support needs consideration.

Thank you for the explanation! I will push forward with the work around solution and humbly request your consideration in adding day of the year to the support date format tokens🙏🏻 Thank you again for taking the time to respond!