Reactコンポーネント内で使いやすいreact-input-calendarを使う #JavaScript

Reactベースの簡単なWebページを作っている中で、Datepickerを使いたい要件があった。
jQuery UIのDatepickerでも良いのかもしれないけど、せっかくなので？Reactと相性の良さ気なものを探した。

それで辿り着いたのが、 react-input-calendar 。

見た目は、こんな感じ。

インストール

% npm install react-input-calendar --save

使い方

Reactのコンポーネントのrender関数内で以下のように定義すると、とりあえず使える。
これは、READMEにある通り。

var Calendar = require('react-input-calendar');

（中略）

<Calendar format="DD/MM/YYYY" date="4-12-2014" />

自分が施したカスタマイズ

以下のカスタマイズをする方法。

日付の書式を YYYY-MM-DD にする
日付変更時に返ってくる日付の書式もYYYY-MM-DDにする
初期表示時の日付を指定する
labelタグと紐付ける
日付を選択したら、カレンダーが閉じるようにする

<label labelFor="ticketDate">登録日</label>
<Calendar
    // 日付の書式をYYYY-MM-DDにする
    format="YYYY-MM-DD"
    // onChange時に返ってくる日付の書式
    computableFormat="YYYY-MM-DD"
    // 日付変更時のコールバック（ここでは、親コンポーネントの関数をセット）
    onChange={this.props.changeDate}
    // 初期表示時の日付（ここでは、propsで親コンポーネントから本日をもらう）
    date={this.props.ticketDate}
    // labelForとの紐付け
    inputFieldId="ticketDate"
    // 日付を選択したら、カレンダーが閉じるようにする
    // propTypesがBooleanなので{true}を渡す
    closeOnSelect={true}
/>

結構色々な設定値があって、今回自分が使いたい範囲であれば、問題なく対応できた。
見た目も、今回CSSフレームワークに使った Milligram とも違和感なく溶け込んでくれたので、使って良かったコンポーネントでした。