How to change the format of segments in Date Field

[rdangol1]

I was wondering if there is a way to change the date format for segments in the date field from mm/dd/yyyy to yyyy/mm/dd.

[LFDanLu]

Is this for a specific locale? DateField's date segment format should adapt itself automatically to match the provided Provider locale. https://codesandbox.io/s/react-spectrum-template-forked-t8bfr0?file=/src/App.js This example is with zh-CN (China) as the locale and thus appears with yyyy/mm/dd as the formatting

[rdangol1]

Yep just for one specific locale. I tried slicing it but that just messed up the whole thing.

[LFDanLu]

Which locale specifically? Is yyyy/mm/dd expected for that locale or is DateField not switching the format properly?

[rdangol1]

It works perfectly as intended. Just for en-US and I think by default it is mm/dd/yyyy.

[RIP21]

Adding to this one is it possible to format segments like Aug 6, 2022?

I assume the easiest option is not to use DateField then at all, and just picker, while the field is a 100% presentational component or a button that triggers the opening of the calendar/picker.
Right? Or maybe format it but disable segment editing with the keyboard, allowing only increment/decrement editing? E.g. for day and year, it could be normal editing, but with a month-only arrow up/down.

Or it's rather unsupported (partial disabling editing of the segments or so) and it's easier to move editing 100% to the picker?

Thanks.

[devongovett]

Yeah, you could just make a button that triggers a calendar popover with this date formatted in it. I wouldn't recommend making a format like this editable because users won't know that they need to type numbers into segments that are spelled out (like for "Aug" they need to type 8).

[rdangol1]

Could you please put the code in sandbox for the formatted segments ? would really appreciate it.

[RIP21]

@rdangol1 I pushed back on designers and we agreed on the default format being the one that react-aria gives out of the box. So, sorry, not examples to share.

[rdangol1]

@devongovett could you please share an example?

[simenbrekken-visma]

I added an example of a workaround for this issue here: #4322 (reply in thread)

[binaryartifex]

@devongovett does the RAC textfield have the ability to have a readonly inputfield with a custom date format (like Aug 6, 2022 as mentioned by @RIP21) that can double as the trigger element within a dialogtrigger instead of a button and have it open into a calendar on with the enter or space keys? the issue im having atm just using a dynamic button label is having a form label and error message/description above and below the button as i want it to at least visually look like an input field. however there's no way to have an 'error message' against a button, at least semantically, especially if its part of a form. having readonly date pickers where users have to select a date from a calendar does away with a magnitude of what ifs when it comes to the validation of classic date picker segments...my two cents....

[MisterCommit]

<I18nProvider locale="en-UK"> <AriaDatePicker className="flex flex-col" {...props} placeholderValue={new CalendarDate(1980, 14, 1)} // value={parseDate(selectDate)} // onChange={(newSelectedData) => handleSelectNewData(newSelectedData)} >