スクリプトのお勉強

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
    これをみてサンプルを作成した。

-スクリプトのお勉強

執筆者:

関連記事

VMware player(workstation) から WSL2に乗り換える

いままで、VMware player(今のVMWare Workstation Player)上で、作って確認していたけど、いちいち起動するのがだるいです。 ついでにやたらとリソースを使用するので、こ …

SPAMチェック for OCN の開発

前回、Thunderbirdプラグインの概要を書いたので、今回は開発したプラグインについて書きます。 SPAMチェック for OCNとは 以下の機能を持ったThunderbirdのアドオン(プラグイ …

Python3 – VCR.py でネットワーク系テストを簡単に作成する

1. 始めに python3で実装すると、モックテストをしたくなります。モックを使って、比較的簡単にテストできるからです。 問題はネットワーク系テスト モックテストで問題になるのは、外部に依存するテス …

Djangoアプリサンプル – 画像ファイルアップロード + 顔モザイク(統合編)

顔モザイク Djangoアプリ 前々回 前回 を統合して、Djangoアプリを作成してみようと思います。 前提インストール 前回、ubuntu 18を前提に記述しましたが、CentOS7(CentOS …

ワンライナーから使いそうなのを抜粋

ワンライナー多すぎ、、 https://linuxcommandlibrary.com/basic/oneliners は膨大なワンライナーがあっていいのですが、多すぎて、何が使えるかぱっと見分かりま …

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