概要
DatePicker(日付選択コンポーネント)の情報は数多くありますが、時間まで表示するコンポーネント「DateTime(Picker)」の情報になると数少ないため、調べてまとめた情報を載せます。
環境
- React.js(16.2.0)
- moment(2.22.2)
- react-datetime(2.16.2)
DateTimePickerの代用を探し求めて
過去に、ReactではDateTimePicker（react-bootstrap-datetimepicker）というコンポーネントがあったのですが、
現在はDeprecatedされており、最新のReact.jsで動かそうものなら多数のエラーに阻まれて動かせない状態。(ECMAのバージョンなどが新しくなったことが理由で動かなくなったようです。)
これの代わりになるものを探そう、ということで色々と模索してみました。
- 時間(秒)まで設定できること
- UIから時間を設定できること
- Reactの最新バージョンに対応してること
にマッチするコンポーネントを探してみました。
ちなみに、DatePickerだと多数のコンポーネントがあります。
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
デモページのようにクリックするとカレンダーが出てきて、下段の時計をクリックすると時間の調整ができます。
例えば、以下のように使います。
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に記載されています。
Moment.jsという日付設定のライブラリを理解すると、すんなり頭に入ってきました。
後は、CSSの情報をindex.jsxに入れれば完成です。
//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
<DateTimePicker />で利用できます。
こちらも秒単位まで指定できて、かつ使い勝手もよさそうです。
リンク先にOnline demoがあります。
npm install react-datetime-picker でnode.jsに入れられます。
（今回はアナログ時計よりもデジタル時計の方がUIとして好評だったので、前者を選びました。）
（番外編）input要素を使うと(HTML5)
Reactですが、一応input要素を使って強引に実装することもできました。
inputの中でdatetime-localを使って要件を満たすものを作ります。
var date = new Date();
return (
<input type='datetime-local' step="1" className="form-control" defaultValue={date} />
);
step="1"は秒刻みにするのに必要です。datetime-local以外にもdateを指定すると日付だけの表記になるなど、用途は様々です。
他にも、様々な属性があるので調べてみると案外使いこなせそうです。
ただし、非対応のブラウザが多い＆typeにdate-timeを指定する可能性が将来あるので、そこはご留意ください。
（番外編2）jQueryを使った場合
Bootstrap 3 Datepicker v4 Docs
jQueryだとこちらのコードが実装しやすそうな印象だった。
React上でも無理矢理実装できなくはないですが、今回はパスします。
まとめ
本家がDeprecatedになってから多数の派生コンポーネントがあるみたいで、調べてみると色々なパターンが見つかりました。
探せばまだまだ類似のコンポーネントが見つかりそうです。
似たようなコンポーネント・名称が多く、調べていて混乱してくる所があったのでまとめてみました。
参考になれば幸いです。
参考
React
jQuery
HTML(input)