Antdを使用した日付の開始日と終了日の妥当性検証方法

日付の範囲指定コンポーネントの使用: Antdには、DatePickerやRangePickerなどの日付選択コンポーネントがあります。これらのコンポーネントを使用すると、ユーザーが日付の範囲を選択できるようになります。
イベントハンドラを使用した妥当性検証: Antdの日付選択コンポーネントには、onChangeイベントハンドラがあります。このイベントハンドラを使用して、選択された開始日と終了日の妥当性を検証することができます。例えば、以下のコードでは、終了日が開始日よりも前の日付である場合にエラーメッセージを表示します。

import React, { useState } from 'react';
import { DatePicker } from 'antd';
const DateRangePicker = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const [error, setError] = useState('');
  const handleDateChange = (dates) => {
    const [start, end] = dates;

    if (start && end && end.isBefore(start)) {
      setError('終了日は開始日よりも前の日付にする必要があります');
    } else {
      setError('');
    }
    setStartDate(start);
    setEndDate(end);
  };
  return (
    <div>
      <DatePicker.RangePicker onChange={handleDateChange} />
      {error && <p>{error}</p>}
    </div>
  );
};
export default DateRangePicker;

上記のコードでは、useStateフックを使用して開始日と終了日を管理し、handleDateChange関数で妥当性検証を行っています。エラーメッセージは、errorステートを使用して表示されます。

これらの方法を使用することで、ユーザーが適切な開始日と終了日を選択したかどうかを簡単に検証することができます。このように、Antdを使用して日付の妥当性検証を行うことで、ユーザーによる誤った入力を防ぎ、使いやすいUIを提供することができます。