DateRange

DateRange.tsx

import React, { useState } from 'react';
import './DateRange.css';

interface DateRangeProps {
  label: string;
  onChange: (startDate: Date, endDate: Date) => void;
}

const DateRange = ({ label, onChange }: DateRangeProps) => {
  const [startDate, setStartDate] = useState<Date>(new Date());
  const [endDate, setEndDate] = useState<Date>(new Date());

  const handleStartDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setStartDate(new Date(event.target.value));
    onChange(new Date(event.target.value), endDate);
  };

  const handleEndDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setEndDate(new Date(event.target.value));
    onChange(startDate, new Date(event.target.value));
  };

  return (
    <div className="date-range">
      <label>{label}</label>
      <input type="date" value={startDate.toISOString().slice(0, 10)} onChange={handleStartDateChange} />
      <input type="date" value={endDate.toISOString().slice(0, 10)} onChange={handleEndDateChange} />
    </div>
  );
};

export default DateRange;

DateRange.module.css

.date-range {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.date-range label {
  margin-bottom: 8px;
}

.date-range input {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-bottom: 8px;
}