<DatePicker />と<DateRangePicker />の日付周りの表示を少し多言語対応
#633
Conversation
|
✔️ Deploy Preview for ingred-ui ready! 🔨 Explore the source changes: 9749683 🔍 Inspect the deploy log: https://app.netlify.com/sites/ingred-ui/deploys/61b943f692b7e800080ff049 😎 Browse the preview: https://deploy-preview-633--ingred-ui.netlify.app |
| DatePicker: { | ||
| defaultProps: { displayFormat: "YYYY/MM/DD", monthFormat: "YYYY年 M月" }, | ||
| }, | ||
| DateRangePicker: { | ||
| defaultProps: { displayFormat: "YYYY/MM/DD", monthFormat: "YYYY年 M月" }, | ||
| }, |
There was a problem hiding this comment.
表示のフォーマットを変更できるようにした
There was a problem hiding this comment.
TL; DR
moment.locale('ja')したうえでmonthFormat : "YYYY年MMM"とする事もできるね(しなくてよい）- 真に多言語対応するときは考えたほうが良いかもしれないですね。
- 特に曜日ヤバい
- でも今はまだいいかな
jaJPのときは monthFormat YYYY年 M月。
OriginalDateRangePicker として内部的に参照してるのはこれ。
https://github.com/airbnb/react-dates
react-dates の内部は ようするにmoment で変換している。
momentのフォーマットは、まぁ普通によくあるやつ( M = 1,2 ... 11, 12 , MM = 01, 02, ... 11, 12, MMM=Dec, MMMM=December
https://momentjs.com/docs/#/parsing/string-format/
moment("20121220", "YYYYMMDD").format('MM') 等で確認できる。
ここまでは良い。気になったのはmoment自体にもlocaleがあること。。。
locale('ja') を追加する
moment("20121220", "YYYYMMDD").locale('ja').format('MMMM') -> 12月
(MMM も MMMM も同じ結果)
で、ここまでコード読んでしまいちゃんと react-dates のreadme読んでなかったので読む。
https://github.com/airbnb/react-dates#localization
Storybookには中国語サンプルが。
（別に中国人も「1月」でも「一月」でも通じると思われる…）
moment.locale('zh-cn'); と利用直前にセットするやつ。
https://github.com/airbnb/react-dates/blob/b8e26f01933aa6513af6fd22a7525ff1cd30df06/stories/DateRangePicker.js#L74-L101
moment.locale は振る舞いがglobalですからね。。。
https://momentjs.com/docs/#/i18n/changing-locale/
というわけで、曜日にまで踏み込むとかだとmoment.localeからやったほうが良さそう。
曜日は 星期一 とか 月曜日 とかだったり特に多様なので。
| @@ -0,0 +1,158 @@ | |||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | |||
|
|
|||
| exports[`Tabs component testing Tabs 1`] = ` | |||
There was a problem hiding this comment.
なぜいままでなかったのか....:thinking:
|
|
||
| <h2>DatePicker</h2> | ||
| <Typography> | ||
| ※ Needs locale import (e.g. import 'moment/locale/ja'). |
There was a problem hiding this comment.
例えば曜日とかの表示は明示的にimportが必要
Check List (If️ you added new component in this PR)
src/components/index.ts.storybook/documents/Information/Samples/Samples.stories.tsx