DatePicker format not as flexible as renderValue, calendar display broken on valid format

[boriscosic]

What version of rsuite are you using?

5.60.2

What version of React are you using?

17

What version of TypeScript are you using (if any)?

5

What browser are you using?

Chrome

Describe the Bug

DateRangePicker and DatePicker renderValue could support any format while maintaining the flexible yyyy-MM-dd input field. The format is limitted in functionality and support of date-fns formats https://date-fns.org/v3.6.0/docs/format

For example, EEE, dd MMM works for display but it breaks the day selection in the calendar.

Expected Behavior

Custom formatting does not break calendar selection.

To Reproduce

<DatePicker format="EEE, d MMM" defaultValue={new Date()} />

[simonguo]

Hi @boriscosic.

This is indeed a problem that I didn't consider well. Let me think about how to better support it. If you want to support renderValue, you cannot use it with editable.

[boriscosic]

Thanks @simonguo!

I was playing with label to set the display using date-fns format, <DatePicker label={format(new Date(), 'EEE, d MMM')} defaultValue={new Date()} /> and maybe hiding the input box with CSS. Its not pretty and the icon get offset to label and not right aligned to field.

Might be a way to go about it as an option to hide the input field.

[simonguo]

Fixed in v5.61.0.

[boriscosic]

@simonguo thanks so much for fixing this!

I noticed now the edit doesn't work really well, event after I tried format yyyy-MM-dd. I use 5.37.4 and this behaviour worked really well https://stackblitz.com/edit/react-len85x-4cdj4d?file=index.js,package.json.

The header used renderValue function and the input default to yyyy-MM-dd from the format. Any thoughts on reverting to that behaviour if renderValue is provided, rather then using editable={false}

Thanks for getting the fix out!

[simonguo]

I noticed now the edit doesn't work really well, event after I tried format yyyy-MM-dd. I use 5.37.4 and this behaviour worked really well https://stackblitz.com/edit/react-len85x-4cdj4d?file=index.js,package.json.

Fixed in #3815