スクリプトのお勉強

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

-スクリプトのお勉強

執筆者:

関連記事

小ネタ: JavaScriptにてBase64エンコード/デコードする方法

小ネタです。JavaScriptにてBase64エンコード/デコードをしようとして、意外と詰まったので、メモ的に方法を書いておきます。 結論: js-base64ライブラリを使用する これだけです。。 …

svelteをチュートリアルしてみる

年末の休みは、svelteのチュートリアルをしてみました。なんとなくやはりそう?なので。 svelteとは Webアプリのフロントエンド(UI)用フレームワークです。要するにReactみたいなもんです …

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

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

整形/文法チェック ツール インストールまとめ

1.はじめに 最近、仕事で複数スクリプトを組み合わせてコーディングすることが多くなりました。 それだと、各スクリプトの癖を忘れたり、そもそもどう書くのか忘れたりと、不良を作りこむ可能性が多くなります。 …

Pipenv vs Poetry

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

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