studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📝(react) illustrate international calendars of DatePicker component

Browse Source 
Show international capabilities of the `DatePicker` component using the
`locale` props and the Cunningham provider. Dates would
be automatically displayed in the appropriate calendar system.
This commit is contained in:
Lebaud Antoine
2023-06-26 14:28:17 +02:00
committed by aleb_the_flash
parent e1489b7fe0
commit 5c61413949
3 changed files with 35 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/polite-mails-remain.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@openfun/cunningham-react": minor
---
Add calendar system customization in `DatePicker` component

10
packages/react/src/components/Forms/DatePicker/index.mdx
View File

@@ -122,6 +122,16 @@ When passing an invalid date, for example outside of the valid range, the DatePi
<Story id="components-forms-datepicker--invalid-value"/> <Story id="components-forms-datepicker--invalid-value"/>
</Canvas> </Canvas>
## International calendars
When passing a locale value to the DatePicker components, dates would be automatically displayed in the appropriate calendar system.
By default, the DatePicker component uses the CunninghamProvider locale.
<Canvas sourceState="shown">
<Story id="components-forms-datepicker--custom-locale"/>
<Story id="components-forms-datepicker--cunningham-locale"/>
</Canvas>
## Props ## Props
You can see the list of props below. You can see the list of props below.

20
packages/react/src/components/Forms/DatePicker/index.stories.tsx
View File

@@ -95,6 +95,26 @@ export const Fullwidth = {
}, },
}; };
export const CustomLocale = () => (
<div style={{ minHeight: "400px" }}>
<CunninghamProvider>
<DatePicker
label="Pick a date"
locale="hi-IN-u-ca-indian"
defaultValue="2023-06-25"
/>
</CunninghamProvider>
</div>
);
export const CunninghamLocale = () => (
<div style={{ minHeight: "400px" }}>
<CunninghamProvider currentLocale="fr-FR">
<DatePicker label="Pick a date" defaultValue="2023-06-25" />
</CunninghamProvider>
</div>
);
export const Controlled = () => { export const Controlled = () => {
const [value, setValue] = useState<StringOrDate | null>("2023-05-26"); const [value, setValue] = useState<StringOrDate | null>("2023-05-26");
return ( return (