fix: overriding date format with local props locale #4052
Conversation
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@edvansts is attempting to deploy a commit to the rsuite Team on Vercel. A member of the Team first needs to authorize it. |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
There was a problem hiding this comment.
In useCustom, the date has been formatted, so you can set the locale directly through CustomProvider.
| @@ -97,7 +100,7 @@ const CalendarHeader: RsRefForwardingComponent<'div', CalendarHeaderPrivateProps | |||
| /> | |||
| <Button | |||
| {...btnProps} | |||
| aria-label="Select month" | |||
| aria-label="Select month 2222222222" | |||
There was a problem hiding this comment.
The 2222222222 here should be removed.
| @@ -1,15 +1,18 @@ | |||
| import React from 'react'; | |||
| import { useCustom } from './useCustom'; | |||
| import { Locale } from '@/locales'; | |||
There was a problem hiding this comment.
| import { Locale } from '@/locales'; | |
| import { Locale } from '../locales'; |
The import of locales needs to use relative paths, otherwise an error will occur
https://vercel.com/rsuite/rsuite-nextjs/HXDKZgGi8aox7iUmrKhTUPHVBT4h?filter=errors
Issue: #4051
Hi, what's up?
This is my first contribution to rsuite, so I must have forgotten or done something wrong, so let me know about points of improvement in the issue description, pull request, etc 🫶
This pull request includes several changes to the
Calendarcomponent and related files to support custom date locales. The most important changes include modifications to theFormattedDatecomponent, updates to aria-label generation, and adjustments to various calendar components to utilize the new locale support.Support for custom date locales:
src/CustomProvider/FormattedDate.tsx: Added adateLocaleprop to theFormattedDatecomponent to allow passing a custom locale for date formatting.src/Calendar/utils/getAriaLabel.ts: Updated thegetAriaLabelfunction to accept an options object, including a custom locale for date formatting.Updates to aria-label generation:
src/Calendar/Grid/GridCell.tsx: Modified theariaLabelgeneration to include the custom locale.src/DatePicker/hooks/useFocus.ts: Adjusted thecheckFocusablefunction to generateariaLabelwith the custom locale.Adjustments to calendar components:
src/Calendar/Calendar.tsx,src/Calendar/CalendarBody.tsx,src/Calendar/CalendarHeader.tsx,src/Calendar/MonthDropdown/MonthDropdownItem.tsx: Updated various components to pass the custom locale to theFormattedDatecomponent andgetAriaLabelfunction. [1] [2] [3] [4] [5]Tests:
src/CustomProvider/test/FormattedDateSpec.tsx: Added a test case to ensure theFormattedDatecomponent correctly renders dates with a custom locale.