Ant DesignのDatePickerコンポーネントを使ってUTC日付を選択する方法

1. 必要なパッケージのインストール: まず、プロジェクトにAnt DesignとReactの依存関係を追加します。以下のコマンドを実行してインストールします。

npm install antd react

2. DatePickerコンポーネントのインポート: DatePickerコンポーネントを使用するために、次のようにインポートします。

import { DatePicker } from 'antd';

3. UTCモードの有効化: DatePickerコンポーネントをUTCモードで使用するには、showTimeプロパティにtrueを設定し、showTimezoneプロパティにtrueを設定します。これにより、タイムゾーンの選択と時間の選択が有効になります。

<DatePicker showTime showTimezone />

4. UTC日付の取得: DatePickerから選択された日付は、UTC形式のJavaScript Dateオブジェクトとして取得できます。以下のコード例では、onChangeイベントハンドラを使用して選択された日付を取得しています。

function handleDateChange(date, dateString) {
  console.log(date.utc().format()); // UTC形式の日付の出力
  console.log(dateString); // 文字列形式の日付の出力
}
<DatePicker showTime showTimezone onChange={handleDateChange} />