mui 24時間形式の時刻選択器の使用方法

まず、mui (Material-UI) は、Reactベースの人気のあるUIライブラリです。muiを使用すると、簡単に美しいユーザーインターフェースを作成することができます。

24時間形式の時刻選択器を作成するには、muiの「TimePicker」コンポーネントを使用します。以下に、基本的な使い方とコード例を示します。

まず、muiをプロジェクトにインストールします。ターミナルで以下のコマンドを実行します:

npm install @mui/lab

インストールが完了したら、コンポーネントをインポートします:

import React, { useState } from 'react';
import { TimePicker } from '@mui/lab';
const App = () => {
  const [selectedTime, setSelectedTime] = useState(null);
  const handleTimeChange = (time) => {
    setSelectedTime(time);
  };
  return (
    <div>
      <TimePicker
        label="時間を選択"
        value={selectedTime}
        onChange={handleTimeChange}
        renderInput={(params) => <TextField {...params} />}
        inputFormat="HH:mm"
      />
    </div>
  );
};
export default App;

上記のコードでは、TimePickerコンポーネントを使用して時間を選択するためのUIを作成しています。selectedTimeという状態変数を使用して、選択された時間を管理しています。handleTimeChange関数は、時間が変更されたときに呼び出され、選択された時間を更新します。

labelプロパティには、時刻選択器のラベルを指定します。valueプロパティには、現在選択されている時間を設定します。onChangeプロパティには、時間が変更されたときに呼び出される関数を指定します。renderInputプロパティは、テキストフィールドのレンダリングをカスタマイズするためのオプションです。inputFormatプロパティには、入力される時間の形式を指定します。

これで、muiを使用して24時間形式の時刻選択器を作成する方法がわかりました。このコード例を参考にして、自分のプロジェクトに適用してみてください。

この投稿が役立つことを願っています！もし質問や疑問があれば、お気軽にコメントしてください。それでは、素晴らしいコーディング体験をお楽しみください！