スクリプトのお勉強

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

-スクリプトのお勉強

執筆者:

関連記事

Nuxt.jsのFormで入力/確認/完了フォームを作成してみた(その1)

背景 今回は、Webアプリケーションの、フロントエンド系のお話です。ほとんどの場合、バックエンドなのですが、時々フロントエンドもするんですよね。。 私の派遣先では、入力フォームを以下のように分ける要望 …

gradleのcommandLineでリダイレクト

gradleというビルドツールがあります。なぜかRPMを作成するのに使ってます。Ansibleも使ってるんですがね。。 それはともかく、ここの通りなのですが、例えばls -lRの出力を、プロジェクトデ …

FastAPIでAPIを作ってみる(その1)

勉強として、FastAPIを使用して、実際にAPIを作成し、起動しようと思います。目標としては、本番運用用の設定まで行いたいと思います。 FastAPIとは FastAPIとは、Pythonによる、W …

go 1.16 でviperを使って設定ファイルを読みだすプログラムを作ってみた

他にたくさんあるけど こんな感じの内容はたくさんあると思いますが、、goの初心者がなんとなくgoの手習いとして、まずは設定ファイルを読みだすことをしてみようと思いました。 go動作環境 windows …

Pipenv vs Poetry

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