daterangepicker

# Date Range Picker 4

![Improvely.com](https://i.imgur.com/UTRlaar.png)

This date range picker component creates a dropdown menu from which a user can
select a range of dates. I created it while building the UI for [Improvely](http://www.improvely.com), 
which needed a way to select date ranges for reports.

Features include limiting the selectable date range, localizable strings and date formats,
a single date picker mode, a time picker, and predefined date ranges.

## Browser setup

Copy `daterangepicker.js` and `daterangepicker.css` to your site. 

```html
<link rel="stylesheet" href="daterangepicker.css">
<input id="dates" aria-label="Report dates">
<script src="daterangepicker.js"></script>
<script>
  const picker = new DateRangePicker('#dates', {
    locale: { format: 'YYYY-MM-DD' },
    ranges: { Today: [new Date(), new Date()] }
  });
  document.querySelector('#dates').addEventListener('apply.daterangepicker', event => {
    console.log(event.detail.startDate.toDate(), event.detail.endDate.toDate());
  });
</script>
```

## Package and framework usage

```js
import DateRangePicker from 'daterangepicker';
import 'daterangepicker/daterangepicker.css';

const picker = new DateRangePicker(inputElement, options, (start, end, label) => {
  console.log(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'), label);
});
```

Create the picker after its element mounts and call `picker.remove()` when it unmounts. In React, create it in `useEffect` and return the cleanup function. In Vue, use `onMounted` and `onBeforeUnmount`. In Angular, use `ngAfterViewInit` and `ngOnDestroy`. Importing the module is safe during server rendering. TypeScript declarations ship with the package. CommonJS callers can use `require('daterangepicker')`. Browser modules can import the standalone `daterangepicker.mjs` directly.

Use `setStartDate`, `setEndDate` and `setRanges` to update a mounted picker. Pass `null` to `setRanges` to remove the preset list. A second constructor call on the same element replaces the first picker. `DateRangePicker.getInstance(element)` returns its current instance.

## Existing installations

Keep the application's existing jQuery and Moment script tags when replacing the picker file. The classic build registers `$.fn.daterangepicker` and the lowercase `window.daterangepicker` constructor. With Moment available, callbacks and date properties use genuine Moment objects with the application's locale and plugins. CommonJS also discovers installed legacy peers. Applications that use these libraries directly should declare them as their own dependencies.

For ES modules that keep jQuery or Moment private to the module, register the imported copies once before initializing legacy widgets:

```js
import $ from 'jquery';
import moment from 'moment';
import DateRangePicker from 'daterangepicker';

DateRangePicker.installJQuery($, moment);
$('#dates').daterangepicker(options);
```

The plugin supports chaining, `$.fn.daterangepicker.defaultOptions`, `