react-date-range

import React, { useState } from 'react'; import { DateRangePicker } from 'react-date-range'; import 'react-date-range/dist/styles.css'; // main style file import 'react-date-range/dist/theme/default.css'; // theme css file function MyDateRangePicker() { const [state, setState] = useState([ { startDate: new Date(), endDate: null, key: 'selection' } ]); const handleSelect = (ranges) => { setState([ranges.selection]); console.log('Selected range:', ranges.selection); // You would typically update your application state here // e.g., send ranges.selection.startDate and ranges.selection.endDate to a parent component or API }; return ( <div> <h2 style={{ marginBottom: '15px' }}>Select a Date Range</h2> <DateRangePicker ranges={state} onChange={handleSelect} showSelectionPreview={true} moveRangeOnFirstSelection={false} months={2} // Display two months direction="horizontal" /> </div> ); } // To use this component in a React app, you'd typically render it: // import { createRoot } from 'react-dom/client'; // const container = document.getElementById('root'); // const root = createRoot(container); // root.render(<MyDateRangePicker />);