スクリプトのお勉強

React.js の Ant Design使ってみる(DateTimePicker編)

投稿日:

DateTimePickerサンプル

DateTimePickerを使うサンプルで、いいのがなかなかないです。Dateだけとか、Timeだけってのはあるのですが。

ということで作ってみようと思いました。

条件

サンプルの条件を以下にしてみました。

  • Ant Design使用
    • よさそげなので使用してみます。
  • dayjs使用
    • momentを使うサンプルはたくさんあるのですが、もう更新されてないのでdayjsにしてみようと思います。
  • 日本語ロケールを追加する
    • 英語はたくさんあるので、日本語ロケールも追加してみます。

環境

動作環境は以下のとおりです。

  • CentoOS8 stream
  • nodejs: v10.23.1
  • npm: 6.14.10

サンプル

ここにサンプルを置きました。

手順

以下の手順でサンプルを作成しました。

create-react-app

$ npx create-react-app react_datepicker_sample --template typescript
$ cd react_datepicker_sample
$ npm install antd dayjs
$ npm remove moment

修正

componentsディレクトリを生成して、以下のdatetimepicker.tsxファイルを作成します。

import dayjs from 'dayjs';
import React, { FC } from 'react';
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
import generateDatePicker from 'antd/es/date-picker/generatePicker';
import 'antd/es/date-picker/style/index';
import 'antd/dist/antd.css'
// Add Japanese Locale
import jaJP from 'antd/lib/locale/ja_JP';
import { ConfigProvider } from 'antd';
import 'dayjs/locale/ja';
dayjs.locale('ja')

const DatePicker = generateDatePicker<dayjs.Dayjs>(dayjsGenerateConfig);

const DateTimePicker: FC = () => {
    return (
      <div>
         <ConfigProvider locale={jaJP}>
           <DatePicker format="YYYY/MM/DD HH:mm 以前" placeholder="select date" showTime />
         </ConfigProvider>
      </div>
    );
};

export default DateTimePicker;

App.tsxに以下を足します。

<DateTimePicker />

サンプル起動

$ npm start

サンプル画像

以下の感じ。コンポーネントを選択すると以下。

日付を選ぶと以下のように表示します。

おわりに

次は、これを使用してアプリを作ってみようと思います。

参考

  • https://ant.design/
    Ant Design
  • https://ant.design/components/overview/
  • https://ant.design/docs/react/replace-moment
    これをみてサンプルを作成した。

-スクリプトのお勉強

執筆者:

関連記事

Selenium + Python によるアップロードアプリの動作確認プログラム作成

私の周りでは、なぜかSeleniumが流行っている模様です。 私自身は、Webアプリ的なのも作ってますが、あまり使ってなかったので、使ってみようと思います。 前回作成した、Djangoのupload_ …

WSL2にOpenCV + Pythonをインストールする

お手軽にやろうと思ってやってみました。作業手順自体を見ると、お手軽ではないかもしれません。 環境 インストールする/した環境は以下の通りです。 WSL2Ubuntu 20.04.2 LTSPython …

Pythonのmock.patchを使ってみる

単体テストによく使われるMockライブラリ Pythonで単体テストを行う際、実際のライブラリを使用してしまうと、実際の環境を用意しなければいけません。 例えば、データベースのテストをする際に、データ …

Pipenv vs Poetry

1. はじめに Pythonでお仕事していると、どうしても、環境設定を行う必要があります。 本番環境で動作するように、設定しなければいけないからです。 いろんな状況はあるでしょうが、私がかかわるプロジ …

(小ネタ) Python3 で読み出すのが一番早いデータフォーマットは?

仕事のネタで、Python3(Django)の設定ファイルをreloadしたい、というのがあります。 つまり設定ファイルをちょこちょこ変更するが、その変更のたびにサービスをリスタートするのではなく設定 …

google オプトアウト Click here to opt-out.