Reactでdatepickerを使う - makicamelの日記

最近、Reactを勉強しています。

今日はdatepickerを入れてみたので、簡単なメモ。

ドキュメントがすごくわかりやすい。

Install
```
$ npm install react-datepicker --save
```

使いたいclassでDatePickerをimportする
(cssをデフォルトで使う場合は下記、必要に応じて書き換え)

import React from "react"; //これは通常のReactのimport
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

あとはconstructorでstateにDate型の値を入れて DatePickerコンポーネントを呼び出し、
selectedにさっき指定したstate名、setStateするonChangeイベントを書くだけ。

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date()
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: date
    });
  }

  render() {
    return (
      <DatePicker selected={this.state.startDate} onChange={this.handleChange} />
    );
  }
}

このままだと月/日/年表記になってしまうので、dateFormatを指定します。

<DatePicker
  dateFormat="yyyy/MM/dd"
  selected{this.state.startDate}
  onChange={this.handleChange} />

また、handleChangeイベントでstateにsetされるのはDate型なので表示するときはStringに変換してあげます。

const toLocaleString = (date) => {
  return [
    date.getFullYear(),
    date.getMonth() + 1, // JavaScriptのgetMonth()は-1が返ってくるので+1する
    date.getDate() 
    ].join('/');
}

ものの5分でDatePickerが作れました😊