Svelte

Bind the input element and create the picker inside onMount. Svelte calls the returned cleanup function when the component unmounts.

App source

ReportDates.svelte

<script>
  import { onMount } from 'svelte';
  import DateRangePicker from 'daterangepicker';
  import 'daterangepicker/daterangepicker.css';

  let input;

  onMount(() => {
    const picker = new DateRangePicker(input, { singleCalendar: true });
    return () => picker.remove();
  });
</script>

<label>Report dates<input bind:this={input} type="text" /></label>

main.js

import { mount } from 'svelte';
import ReportDates from './ReportDates.svelte';

mount(ReportDates, { target: document.getElementById('app') });

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/svelte.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

Run this example locally

Serve the website directory over HTTP and open /examples/svelte/. To edit the app, change its files in example/integrations/svelte and run these commands from example/integrations.

npm ci
npm run build

Install the picker Third-party licenses