「React.js」ライブラリreact-datetimeをインストールして日付カレンダーを実装する

2022年8月28日

環境

Windows 10 Home 64bit
node v16.17.0
npm 8.15.0
React18.2.0

react-datetimeをインストールする手順
1.demoprojectという名前でプロジェクトを作成します

>create-react-app demoproject

2.react-datetimeをインストール
プロジェクトに移動します。momentをインストールします

>cd demoproject
>npm install react-datetime moment react-moment --force

3.srcディレクトリにcft.jsを作成します
ファイル名 src/cft.js
下記コードを記述します

import React from 'react';
import Datetime from 'react-datetime';
import { ja } from 'moment/locale/ja';

export const Cft = () => {
    return (
        <Datetime locale={ja}/>
    )
}
  
export default Cft

4.srcディレクトリ配下にApp.jsを編集します

import React from 'react';
import Cft from './cft';
import './App.css';

function App() {
  const style = {
    width: "40%",
    margin: "0 auto",
    marginTop: 120
  };
  return (
    <div className="App">
      <div style={style}>
        <Cft />
      </div>
    </div>
  );
}

export default App;

5.npmを実行します

C:\study\skill\demoproject>npm start
略
You can now view demoproject in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.16.1:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

ブラウザから http://プライベートIP:3000にアクセスすると、日付ピッカーが表示されます。