Datepicker

Datepicker.tsx

import React, { useState } from "react";
import "./DatePicker.css";

interface DatePickerProps {
  label: string;
  defaultDate?: Date;
  minDate?: Date;
  maxDate?: Date;
  onChange?: (date: Date) => void;
}

const DatePicker = ({
  label,
  defaultDate = new Date(),
  minDate,
  maxDate,
  onChange = () => {},
}: DatePickerProps) => {
  const [selectedDate, setSelectedDate] = useState(defaultDate);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newDate = new Date(e.target.value);
    setSelectedDate(newDate);
    onChange(newDate);
  };

  return (
    <div className="datePicker">
      <label className="datePickerLabel">{label}</label>
      <input
        type="date"
        value={selectedDate.toISOString().slice(0, 10)}
        onChange={handleChange}
        className="datePickerInput"
        min={minDate?.toISOString().slice(0, 10)}
        max={maxDate?.toISOString().slice(0, 10)}
      />
    </div>
  );
};

export default DatePicker;

Datepicker.module.css

.datePicker {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

.datePickerLabel {
  margin-bottom: 4px;
}

.datePickerInput {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 16px;
}