React
Attach the picker to an input ref in an effect. Returning a cleanup function also handles the extra mount cycle in Strict Mode.
App source
main.jsx
import React, { StrictMode, useEffect, useRef } from 'react';
import { createRoot } from 'react-dom/client';
import DateRangePicker from 'daterangepicker';
import 'daterangepicker/daterangepicker.css';
function ReportDates() {
const input = useRef(null);
useEffect(() => {
const picker = new DateRangePicker(input.current, { singleCalendar: true });
return () => picker.remove();
}, []);
return <label>Report dates<input ref={input} type="text" /></label>;
}
createRoot(document.getElementById('app')).render(
<StrictMode><ReportDates /></StrictMode>
);index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Report dates</title>
<link rel="stylesheet" href="../../daterangepicker.css">
<script type="module" src="../assets/react.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>Run this example locally
Serve the website directory over HTTP and open /examples/react/. To edit the app, change its files in example/integrations/react and run these commands from example/integrations.
npm ci
npm run build