React勉強会

1. Reactにおける
DatePickerとmoment
２０１７年１０⽉２５⽇
有限会社バーチャルテクノロジー
森下⼤貴

2. DatePickerとは

3. フォームをクリックするとカレンダーが表示され、
日付を選択すると、選択した日付がフォームに入力され
るコンポーネント

4. DatePickerを使うためには
ターミナルでインストールする
npm install react-bootstrap-date-picker
以下の２つをImportする
import DatePicker from 'react-datepickerʼ
import 'react-datepicker/dist/react-datepicker.cssʼ

5. DatePickerの使い方

6. DatePickerの考慮点 日付の表示
(⽉/⽇/年)で表⽰されるので
ちょっとわかりにくい

7. DatePickerの考慮点 初期値について①
初期値はどうやって設定するか
this.state = { sample: ʻ ʼ }
だと初期は空っぽで表⽰されてしまう

8. DatePickerの考慮点2 初期値について②
this.state = {sample: ʼ2017/10/19ʻ}

9. momentとは
momentは時刻をmomentオブジェクトで取得する
コンポーネント(⾼機能なDateオブジェクトのようなもの）
何も渡さずに⾏うとmoment型で現在の時刻を返す。
UTCミリ秒を渡した場合は、moment型に変換して返す。
(この場合は2017年10⽉18⽇)
・UTCミリ秒は1970年1⽉1⽇00:00:00から経過した時間をミリ秒単位で表した数値

10. momentを使うためには
以下をimportする
import moment from 'moment'
DatePickerはmomentオブジェクトの設定に従って動作する

11. 日付の表示を変更 moment.locale('ja')
Import moment from ʻmomentʼ と⼀緒に
moment.locale(ʻjaʼ)と書く。
(⽉/⽇/年) (年/⽉/⽇)

12. 初期値はmomentでセットする
moment()で
this.state = { sample: moment() }
現在の⽇付をセット出来る。

13. サーバーで変数を送受信する時の注意点
クライアント サーバー
①⽂字列に変換してから渡す
②オブジェクトに変換して渡す

14. ①サーバー送信時に値を文字列に変換する
DatePicker⽤の変数をそのままサーバーに送信すると
2017-10-19T06:22:20.440Z ISO形式で送信される。
形式を変えたければ送信前に
format()で変換してから送信する
sample.format(ʼYYYY/MM/DDʼ) → 2017/10/19

15. ②フォーマットしたデータを読み込んで
DatePickerに渡す場合
DatePickerに⽂字列(2017/10/19)を渡すとエラーになる
DatePickerが理解できる形にしてやる必要がある

16. Date.parseとmoment()を使う
１：Date.parseに⽂字列を渡して、UTCミリ秒に変換する。
２：変換したUTCミリ秒をmoment()に渡す。
moment(Date.parse(ʻ2017/10/19ʼ))

17. まとめ
• DatePickerのコンポーネントに値を渡す時は、
momentオブジェクトに変換する必要がある。
• サーバーに送信する時は、⽂字列に変換する必要がある。