React.jsコンポーネントのReact-datetimeライブラリのカーソル問題＆解決法

React.jsをすでに導入している方も多いのではないでしょうか。

今回は、React.jsのカレンダーライブラリのReact-datetimeの問題点とその解決法を紹介します。
そもそも、「React.jsとはなんぞや？」と言う方は、下記の記事で丁寧に説明されているので読んでください。

• 5分で理解する React.js

Ract-datetimeとは、React.jsコンポーネント内の日付と時刻に関するカレンダーライブラリです。

では、はじめに、React-datetimeの導入方法から説明します。
すでに導入してる人は、読み飛ばしちゃってください！

react-datetimeの導入

react-datetimeをインストールし、react-datetimeをhogehoge.jsでrequireするだけです。

react-datetimeをインストール

$ npm install react-datetime

hogehoge.jsでreact-datetimeの導入

require('react-datetime');
render: function() {
  return <Datetime />;
}

画面にアクセスすると、こんな感じに表示されます。

React-datetimeの問題点

• 最新のバージョンでは、問題は解消されています。
  • 古いバージョンで発生する現象です。

カーソルが指ではない！！！

ちゃんとクリックできるのに、これって直感的ではない。（導入はとても簡単なのに・・・）

指カーソルにする方法（１）

バージョンをアップロードする。

$ npm update react-datetime

指カーソルにする方法（２）

解決する方法は、とても簡単。CSSでカーソルを指定するだけです。
では、どこのCSSに変更を加えるか確認するために、React-datetimeのHTML構造を見ましょう。

react-datetimeのHTML構造

// カレンダー全体
<div class="rdtPicker">
  <div class="rdtDays">
    <table>
      <thead>
        <tr>
　　　　   // 前月のボタン「 ＜ 」
          <th class="rdtPrev"></th>
          // M月 YYYY （例: 7月 2016）
          <th class="rdtSwitch"></th>
　　　　   // 次月のボタン「 ＞ 」
          <th class="rdtNext"></th>
        </tr>
        <tr>
          // 曜日（例： 日）
          <th class="dow"></th>
                （略）
          <th class="dow"></th>
        </tr>   
      </thead>
      <tbody>
        <tr>
          // 前月の日付
          <td class="rdtDay rdtOld"></td>
                （略）
          // 当月の日付
          <td class="rdtDay"></td>
        </tr>
        <tr></tr>
          （略）         
        <tr></tr>
        <tr>
          // 当月の日付
          <td class="rdtDay"></td>
                （略）
          // 未来の日付
          <td class="rdtDay rdtNew rdtDisabled"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

HTML構造から、.rdtDayクラスを変更すれば良いとわかります。

指カーソルを指定するCSS

.rdtDay {
  cursor: pointer;
}

指定後、画面にアクセスすると、カーソルが指に変身！

まとめ

React.jsコンポーネント内でカレンダーを簡単に表示するReact-datetimeの導入と、その問題点と解決法を紹介しました。

簡単に、導入できるので是非使ってみてください。