【React】「wojtekmaj/react-datetime-picker」を使用して日付と時間の入力ボックスを実装する

概要

日付と時間が入力できるinputをどう実装すれば良いかなと思って、wojtekmaj/react-datetime-pickerというライブラリを見つけたので、試してみました。
実装のサンプルと、導入にあたっての留意点などを記載します。

実装サンプル

ライブラリのGitHubの実装サンプルそのままですが、以下のような実装で表示はできます。
細かい設定についてはUser guideを参照ください。

import React, { useState } from 'react';
import DateTimePicker from 'react-datetime-picker';

function MyApp() {
  const [value, onChange] = useState(new Date());

  return (
    <div>
      <DateTimePicker onChange={onChange} value={value} />
    </div>
  );
}

日付のカレンダーは、以下のように選択形式で表示されます。

時刻入力はテキストになりますが、時計のイメージが表示されます。

導入にあたり留意点

1. wojtekmaj/react-calendarのインストール

CSSについて関連ライブラリのwojtekmaj/react-calendarのものを使ってるので、併せてインストールが必要です。私が試した時のpackage.jsonの設定は以下の通りです。

package.json

"dependencies": {
    "react-calendar": "^3.7.0",
    "react-datetime-picker": "^3.5.0",
}

2. transpileの設定（Next.jsを使用している場合のみ）

Next.jsを使用している場合は、transpileの設定が必要です。詳細はNext.js + Fullcalendar v5 を攻略するの記事を参考に、next-transpile-modulesをインストールします。
そして、next.config.jsを以下の通りに設定します。（webpackは5の前提です）

next.config.js

const withTM = require("next-transpile-modules")([
  "react-calendar",
  "react-datetime-picker",
]);

module.exports = withTM({
  future: {
    webpack5: true,
  },
});