Applying a date formatter to a date field

[brandonpittman]

I tried passing a date formatter like

let dateFormatter = useDateFormatter({ month: "2-digit", day: "2-digit" })

to useDateField in the state object, but the resulting date input doesn't force two digit months or days. Is there a way to make useDateField create an input like that?

[snowystinger]

Seems like something we could expose on the options here: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/datepicker/src/useDateFieldState.ts#L190

At least, doing that works for me locally. It probably didn't work for you since the internals of useDateFieldState would need access to the same formatter you've created.

@devongovett any concerns?

[brandonpittman]

The ja-JP defaults to a date like 2023/3/3, but the design I've been tasked with requires a display of 2023/03/03. You can use Intl.DateTimeFormat to make that date, but you can't represent it in DateField.

[snowystinger]

Can you expand on your business reason for needing this? I'm talking to our internationalization team and while this may not be in and of itself confusing, it might create inconsistencies leading to a different kind of confusion.

[brandonpittman]

I was able to sell my designer on not needing this so it’s a non-issue now.

[simenbrekken-visma]

I just came across this issue myself where we support multiple locales but dates are always displayed in ISO-8601 format. A somewhat hacky way to accomplish this is by mapping DateSegments[] to a different list of segments:

const state = useDateFieldState(...);
const segments = getDateFieldSegments(state.segments);


function getDateFieldSegments(segments: DateSegment[]): DateSegment[] {
    const daySegment = segments.find((segment) => segment.type === 'day');
    const monthSegment = segments.find((segment) => segment.type === 'month');
    const yearSegment = segments.find((segment) => segment.type === 'year');
    const separatorSegment = segments.find(
        (segment) => segment.type === 'literal'
    );

    if (!daySegment || !monthSegment || !yearSegment || !separatorSegment) {
        throw new Error('Invalid date field segments');
    }

    const formattedDaySegment = {
        ...daySegment,
        text: daySegment.text.padStart(2, '0'),
    };
    const formattedMonthSegment = {
        ...monthSegment,
        text: monthSegment.text.padStart(2, '0'),
    };
    const formattedSeparatorSegment = { ...separatorSegment, text: '-' };

    return [
        yearSegment,
        formattedSeparatorSegment,
        formattedMonthSegment,
        formattedSeparatorSegment,
        formattedDaySegment,
    ];
}

This will convert any format to "YYYY-MM-DD".

[RIP21]

Will it be interactive? Like with arrow keys etc?

[simenbrekken-visma]

It behaves exactly as it did before, just reordered.