【React】Datepickerを簡単に実装できるライブラリ「react-datepicker」

タイトル通り、React で Datepicker を実装できるライブラリ「react-datepicker」のご紹介です。
サンプルを見た感じ、かなり細かいところまで実装できて便利そうでした。

GitHub と公式のページはこちらから。

GitHub – Hacker0x01/react-datepicker: A simple and reusable datepicker component for React
https://github.com/Hacker0x01/react-datepicker

React Datepicker crafted by HackerOne
https://reactdatepicker.com/

実装の際には、こちらの Qiita の記事も参考になりました。

Reactでカレンダーを使う – Qiita
https://qiita.com/Hitomi_Nagano/items/c6f0e84f1c892c6e69b3

さて、実装方法ですが、まず npm でライブラリをインストールします。

npm install react-datepicker --save

インストールが完了したら、あとはライブラリをインポートして実装するだけです。
サンプルコードは下記のとおりです。

import React, { Component } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

class SamplePage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      day: new Date(),
    }
    this.getFormatDate = this.getFormatDate.bind(this);
  }
  getFormatDate(date) {
    return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
  }
  render() {
    return (
      <div>
        <DatePicker
          locale="ja"
          selected={this.state.day}
          onChange={(date) => this.setState({day: date})}
          customInput={<button>{this.getFormatDate(this.state.day)}</button>} />
      </div>
    );
  }
}
export default SamplePage;

とりあえず、Datepicker のみを表示しているページです。
こちらのサンプルだと、デフォルトで今日の日付が設定されるようになっています。

PCブラウザだと、selected と onChange が設定されていれば問題ないと思います。
ですがスマートフォンで閲覧した場合、日付を表示している要素が input になっているため、日付を変更しようとすると常にソフトウェアキーボードが表示されてしまいます。
これがかなりうっとおしいので、customInput で日付を表示する要素を変更します。
私は <button> 要素に変更しました。
上のコードでは 23行目に記述されています。
こうすることで、日付を変更する際にソフトウェアキーボードが表示されなくなるので、特にスマートフォンでの閲覧を前提としている場合は是非設定してください。

以上、React で Datepicker を実装できるライブラリ「react-datepicker」のご紹介でした。
ご参考になれば幸いです。