概要

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だと多数のコンポーネントがあります。

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

デモページのようにクリックするとカレンダーが出てきて、下段の時計をクリックすると時間の調整ができます。

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

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

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を指定する可能性が将来あるので、そこはご留意ください。

HTML5 input type のブラウザ対応について検証してみた

（番外編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

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

概要

環境