71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { format } from 'date-fns';
|
|
|
|
interface DateRangePickerProps {
|
|
value: {
|
|
from: Date;
|
|
to: Date;
|
|
};
|
|
onChange: (range: { from: Date; to: Date }) => void;
|
|
}
|
|
|
|
export function DateRangePicker({ value, onChange }: DateRangePickerProps) {
|
|
const [from, setFrom] = useState(format(value.from, 'yyyy-MM-dd'));
|
|
const [to, setTo] = useState(format(value.to, 'yyyy-MM-dd'));
|
|
|
|
useEffect(() => {
|
|
setFrom(format(value.from, 'yyyy-MM-dd'));
|
|
setTo(format(value.to, 'yyyy-MM-dd'));
|
|
}, [value]);
|
|
|
|
const handleFromChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const newFrom = e.target.value;
|
|
setFrom(newFrom);
|
|
onChange({
|
|
from: new Date(newFrom),
|
|
to: value.to
|
|
});
|
|
};
|
|
|
|
const handleToChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const newTo = e.target.value;
|
|
setTo(newTo);
|
|
onChange({
|
|
from: value.from,
|
|
to: new Date(newTo)
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center space-x-4">
|
|
<div>
|
|
<label htmlFor="from" className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
|
|
From
|
|
</label>
|
|
<input
|
|
type="date"
|
|
id="from"
|
|
value={from}
|
|
onChange={handleFromChange}
|
|
max={to}
|
|
className="block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="to" className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
|
|
To
|
|
</label>
|
|
<input
|
|
type="date"
|
|
id="to"
|
|
value={to}
|
|
onChange={handleToChange}
|
|
min={from}
|
|
className="block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|