49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
|
|
interface DateRangeInputProps {
|
|
startLabel?: string;
|
|
endLabel?: string;
|
|
startValue?: string;
|
|
endValue?: string;
|
|
onChange: (field: 'startsAt' | 'endsAt', value: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
const DateRangeInput: React.FC<DateRangeInputProps> = ({
|
|
startLabel = 'Дата начала',
|
|
endLabel = 'Дата окончания',
|
|
startValue,
|
|
endValue,
|
|
onChange,
|
|
className = '',
|
|
}) => {
|
|
return (
|
|
<div className={`flex flex-col gap-2 ${className}`}>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
{startLabel}
|
|
</label>
|
|
<input
|
|
type="datetime-local"
|
|
value={startValue}
|
|
onChange={(e) => onChange('startsAt', e.target.value)}
|
|
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
{endLabel}
|
|
</label>
|
|
<input
|
|
type="datetime-local"
|
|
value={endValue}
|
|
onChange={(e) => onChange('endsAt', e.target.value)}
|
|
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DateRangeInput;
|