Skip to content

Commit dc8a02e

Browse files
authored
[datetime] docs: improved localization code example (#4003)
1 parent 6da615b commit dc8a02e

File tree

1 file changed

+10
-3
lines changed

1 file changed

+10
-3
lines changed

packages/datetime/src/datepicker.md

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,13 +102,20 @@ import { LocaleUtils } from "react-day-picker";
102102

103103
By supplying a `locale: string` and `localeUtils: LocaleUtils` prop to these Blueprint components, you can
104104
customize how dates are rendered, which day of the week is the first column, etc.
105+
You will need to overwrite the functions of `LocaleUtil` by your own.
105106
[See the interface definition for more details](https://github.com/gpbl/react-day-picker/blob/v7.3.0/types/utils.d.ts#L5).
106107

107108
Although `@blueprintjs/datetime` and `react-day-picker` do not explicitly require `moment.js` as a dependency,
108109
you may wish to use Moment's implementation of localization so that you do not have to write these functions yourself.
109-
The import from `react-day-picker` shown above gives you a utility object containing functions which do just that; you
110-
may use it like so:
110+
111+
To use moment for your localization, make sure to include `moment` in your dependencies and use `MomentLocaleUtils`
112+
from `react-day-picker/moment` as follow:
111113

112114
```tsx
113-
<DatePicker locale="fr" localeUtils={LocaleUtils} />
115+
import MomentLocaleUtils from 'react-day-picker/moment'
116+
import 'moment/locale/fr';
117+
118+
<DatePicker locale="fr" localeUtils={MomentLocaleUtils} />
114119
```
120+
121+
More detailed examples can be found in the [**react-day-picker** documentation](https://react-day-picker.js.org/docs/localization/).

0 commit comments

Comments
 (0)