スクリプトのお勉強

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

-スクリプトのお勉強

執筆者:

関連記事

Python Django REST Framework(REST API)の作成

1.はじめに 今回は、pythonの「Django」というWebアプリケーションフレームワークを使用し、REST APIを作成します。作成するREST APIは、これから作るであろう、Nuxt.jsか …

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

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

Python3 – django-webtest

忙しいので断片だけ。。 DjangoでWebブラウザからアクセスする感じでテストする、やり方の一つです。以前にやったように、 Seleniumからやってもいいのすが、そこまでじゃない場合の単体テスト方 …

Reflex(Python) をSQLite + ログイン機能付きで使ってみる

2024年現在のWebアプリ作成方法の一つとして、「PythonだけでWebアプリを完結する」作り方があります。 その一つとしてReflexというのがあります。 Reflexとは PythonのWeb …

Vue.js 導入編

1.はじめに 近年、web関係で「クライアントサイドJavaScript」というのがトレンドになっているそうです。 「クライアントサイドJavaScript」と、従来のWebアプリケーションとの違いは …

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