Reactコンポーネント紹介! 今回は、日付の範囲選択ができる「react-date-range」!

プログラミング#React#component

reoring

・

2015年10月13日投稿

こんにちは! れおりんです!! 朝と夜は大分肌寒くなってきましたね〜!
今回は、Reactコンポーネントの「react-date-range」を紹介していきます!

> デモデモ

以下のようにスタイリッシュな日付範囲選択コンポーネントが作れます。

↓ 実際に操作できます

もっと沢山のデモ

> このデモのメイン部分このデモのメイン部分

jsx
render() {
  const { rangePicker, linked, datePicker, predefined } = this.state;
  const format = 'dddd, D MMMM YYYY';

  return (
    <main className={styles['Main']}>
        <DateRange
          startDate='10/11/2015'
          endDate={ now => {
            return '11/12/2015';
          }}
          onInit={ this.handleChange.bind(this, 'rangePicker') }
          onChange={ this.handleChange.bind(this, 'rangePicker') }
        />
    </main>
  )
}

この様に簡単に使えます! すごい!

> ソースコードソースコード

github.com/adphorus/react-date-range

> おわりにおわりに

このコンポーネントは、内部の日付処理に、
Moment.jsというライブラリを使用しているようです。こちらも参考になりそうですね!