33 lines
1,000 B
TypeScript
33 lines
1,000 B
TypeScript
import React, { useState } from 'react';
|
|
import { format } from 'date-fns';
|
|
|
|
export function CalendarDateRangePicker() {
|
|
const [dateRange, setDateRange] = useState({
|
|
startDate: new Date(),
|
|
endDate: new Date()
|
|
});
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
className="px-3 py-1 border rounded"
|
|
onClick={() => {
|
|
const date = new Date(prompt("Enter start date (YYYY-MM-DD)") || dateRange.startDate);
|
|
setDateRange(prev => ({ ...prev, startDate: date }));
|
|
}}
|
|
>
|
|
Start: {format(dateRange.startDate, 'MMM dd, yyyy')}
|
|
</button>
|
|
<span>to</span>
|
|
<button
|
|
className="px-3 py-1 border rounded"
|
|
onClick={() => {
|
|
const date = new Date(prompt("Enter end date (YYYY-MM-DD)") || dateRange.endDate);
|
|
setDateRange(prev => ({ ...prev, endDate: date }));
|
|
}}
|
|
>
|
|
End: {format(dateRange.endDate, 'MMM dd, yyyy')}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|