HTML
JavaScript
Node.js
jQuery
React

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


概要

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

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

jQuery

* HTML + CSS + JavaScript で簡単に導入できるdatetimepicker の比較

* Bootstrap 3でDatetimePickerを使いたい

HTML(input)

* HTML フォームで 日付や時間を入力できるinput要素は datetime-local を使う

* TAG index -- datetime-local