DateTimePickerの代わりを探して(react-datetime componentの紹介)

# 概要

DatePicker(日付選択コンポーネント)の情報は数多くありますが、時間まで表示するコンポーネント「DateTime(Picker)」の情報になると数少ないため、調べてまとめた情報を載せます。


## 環境

* React.js(16.2.0)
* moment(2.22.2)
* react-datetime(2.16.2)


## DateTimePickerの代用を探し求めて

過去に、Reactでは[DateTimePicker](https://github.com/quri/react-bootstrap-datetimepicker)（react-bootstrap-datetimepicker）というコンポーネントがあったのですが、

現在はDeprecatedされており、最新のReact.jsで動かそうものなら多数のエラーに阻まれて動かせない状態。(ECMAのバージョンなどが新しくなったことが理由で動かなくなったようです。)

これの代わりになるものを探そう、ということで色々と模索してみました。

* 時間(秒)まで設定できること
* UIから時間を設定できること
* Reactの最新バージョンに対応してること

にマッチするコンポーネントを探してみました。

ちなみに、DatePickerだと多数のコンポーネントがあります。

* [Top 10: Best Open Source ReactJS Datepicker Components](https://ourcodeworld.com/articles/read/535/top-10-best-open-source-reactjs-datepicker-components)




## react-datetime(`<Datetime />`)

react-datetime(`<Datetime />`)はreact-bootstrap-datetimepicker(`<DateTimeField />`)の後継で、「秒単位で変更可能になった」など多数の機能拡張・変更が行われたコンポーネントです。

npmやyarnを使ってnode_modules以下にインストールできます。`moment.js`についても自動で入ってこなければ一緒にいれましょう。

```
npm install --save react-datetime
```

```
yarn add react-datetime
```

[デモページ](https://codepen.io/simeg/pen/mEmQmP)のようにクリックするとカレンダーが出てきて、下段の時計をクリックすると時間の調整ができます。

例えば、以下のように使います。

``` javaScript
var Datetime = require('react-datetime');
var date = new Date();

//中略
 return(
   <Datetime
     key='sampleKey'
     ref='sampleKey'
     value={date}
     dateFormat="YYYY-MM-DD"
     timeFormat="HH:mm:ss"
   />
 );

```


dateFormatで日付のフォーマットの指定を、timeFormatで時間の指定が行えます。

各種パラメタの詳細仕様については[react-datetime](https://www.npmjs.com/package/react-datetime)に記載されています。

Moment.jsという日付設定のライブラリを理解すると、すんなり頭に入ってきました。


後は、CSSの情報を`index.jsx`に入れれば完成です。


``` javaScript
//index.jsx
  <head>
  //中略
    <link rel="stylesheet" href="/css/react-datetime.css" />
　//中略
  </head>
```

画面を起動すると、

### CSSについてのトラブルシュート

画面を起動してみたところ、`Not allowed to load local resource` というエラーに遭いました。

かつ、react-datetimeのCSSが適用されておらず、型崩れを起こしている模様。

これはReactの仕様で「ファイルに直接アクセスできない」という制約によるものです。

`/node_modules/react-datetime/css/`以下を`/public/css`以下にコピーするか、そこにリンクを貼るかで対応できます。

パスの指定をする時はnode_modules以下を直接は参照できない、ということですね。



## React-DateTime-Picker

* [React-DateTime-Picker](https://www.npmjs.com/package/react-datetime-picker)

`<DateTimePicker />`で利用できます。

こちらも秒単位まで指定できて、かつ使い勝手もよさそうです。

リンク先に[Online demo](http://projects.wojtekmaj.pl/react-datetime-picker/)があります。

`npm install react-datetime-picker` でnode.jsに入れられます。

（今回はアナログ時計よりもデジタル時計の方がUIとして好評だったので、前者を選びました。）



## （番外編）input要素を使うと(HTML5)

Reactですが、一応input要素を使って強引に実装することもできました。

inputの中で`datetime-local`を使って要件を満たすものを作ります。

``` javaScript
  var date = new Date();
  return (
    <input type='datetime-local' step="1" className="form-control" defaultValue={date} />
  );
```

`step="1"`は秒刻みにするのに必要です。`datetime-local`以外にも`date`を指定すると日付だけの表記になるなど、用途は様々です。

他にも、様々な属性があるので調べてみると案外使いこなせそうです。

ただし、非対応のブラウザが多い＆typeにdate-timeを指定する可能性が将来あるので、そこはご留意ください。

* [HTML5 input type のブラウザ対応について検証してみた](https://liginc.co.jp/web/html-css/html/42756)

## （番外編2）jQueryを使った場合

[Bootstrap 3 Datepicker v4 Docs](https://eonasdan.github.io/bootstrap-datetimepicker/)

jQueryだとこちらのコードが実装しやすそうな印象だった。

React上でも無理矢理実装できなくはないですが、今回はパスします。






## まとめ

本家がDeprecatedになってから多数の派生コンポーネントがあるみたいで、調べてみると色々なパターンが見つかりました。

探せばまだまだ類似のコンポーネントが見つかりそうです。

似たようなコンポーネント・名称が多く、調べていて混乱してくる所があったのでまとめてみました。

参考になれば幸いです。



## 参考

React
* [React.jsコンポーネントのReact-datetimeライブラリのカーソル問題＆解決法](https://qiita.com/yn-misaki/items/0fc943561f2b6b57bc7c)

jQuery
* [HTML + CSS + JavaScript で簡単に導入できるdatetimepicker の比較](https://techracho.bpsinc.jp/shibuya/2014_10_15/19114)
* [Bootstrap 3でDatetimePickerを使いたい](https://qiita.com/albyte/items/775e92f02625bc0738a1)

HTML(input)
* [HTML フォームで 日付や時間を入力できるinput要素は datetime-local を使う](http://shiru-web.com/2017/04/12/01-18/)
* [TAG index -- datetime-local](https://www.tagindex.com/html5/form/input_datetime_local.html)