83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import "./DatePicker.css";
|
|
import DatePickerItem from "./DatePickerItem";
|
|
import { IDate, getDateAsString } from "@/services/date";
|
|
|
|
interface DatePickerProps {
|
|
onDateChange: (selectedDate: string | IDate) => void;
|
|
}
|
|
|
|
const DatePicker: React.FC<DatePickerProps> = ({ onDateChange }) => {
|
|
const currentDate = new Date();
|
|
const [selectedDate, setSelectedDate] = useState<string | IDate>(getDateAsString(currentDate));
|
|
|
|
const days = Array.from({ length: 31 }, (_, index) => (index + 1).toString());
|
|
const months = Array.from({ length: 12 }, (_, index) =>
|
|
new Date(0, index).toLocaleDateString(undefined, { month: "long" })
|
|
);
|
|
const years = Array.from({ length: 81 }, (_, index) =>
|
|
(currentDate.getFullYear() - 80 + index).toString()
|
|
);
|
|
|
|
const handleDaySelect = (day: string) => {
|
|
const newDate = new Date(getDateAsString(selectedDate));
|
|
newDate.setDate(parseInt(day));
|
|
setSelectedDate(getDateAsString(newDate));
|
|
};
|
|
|
|
const handleMonthSelect = (month: string) => {
|
|
const newDate = new Date(getDateAsString(selectedDate));
|
|
newDate.setMonth(months.indexOf(month));
|
|
setSelectedDate(getDateAsString(newDate));
|
|
};
|
|
|
|
const handleYearSelect = (year: string) => {
|
|
const newDate = new Date(getDateAsString(selectedDate));
|
|
newDate.setFullYear(parseInt(year));
|
|
setSelectedDate(getDateAsString(newDate));
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (onDateChange) {
|
|
onDateChange(selectedDate); // Call the callback when selectedDate changes
|
|
}
|
|
}, [selectedDate, onDateChange]);
|
|
|
|
return (
|
|
<>
|
|
<div className="date-picker-container">
|
|
<DatePickerItem
|
|
data={days}
|
|
selectedValue={new Date(getDateAsString(selectedDate)).getDate().toString()}
|
|
onSelect={handleDaySelect}
|
|
unit="day"
|
|
/>
|
|
<DatePickerItem
|
|
data={months}
|
|
selectedValue={new Date(
|
|
0,
|
|
new Date(getDateAsString(selectedDate)).getMonth()
|
|
).toLocaleDateString(undefined, { month: "long" })}
|
|
onSelect={handleMonthSelect}
|
|
unit="month"
|
|
/>
|
|
<DatePickerItem
|
|
data={years}
|
|
selectedValue={new Date(getDateAsString(selectedDate)).getFullYear().toString()}
|
|
onSelect={handleYearSelect}
|
|
unit="year"
|
|
/>
|
|
</div>
|
|
<div className="date-picker-selected-date">
|
|
{/* {selectedDate.toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})} */}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DatePicker;
|