Upgrade from version 3

Replace the files

Use daterangepicker.js and daterangepicker.css from the same version 4 checkout. Keep jQuery and Moment ahead of the picker in script order if your application uses them.

<link rel="stylesheet" href="daterangepicker.css">
<input id="report" aria-label="Report period">
<script src="jquery.min.js"></script>
<script src="moment.min.js"></script>
<script src="daterangepicker.js"></script>
<script>
  $('#report').daterangepicker({
    startDate: moment().startOf('month'),
    endDate: moment()
  });
</script>

The classic build registers both window.daterangepicker and window.DateRangePicker. Your existing options, $.fn.daterangepicker.defaultOptions, chainable plugin calls and .data('daterangepicker') instance lookup continue to work. Run the jQuery example.

Check package dependencies and imports

jQuery and Moment are now optional peers. Declare each library your own code imports as an application dependency. For this checkout, run npm pack in the repository and install the resulting version 4 tarball in your application. The examples here load the local build.

CommonJS can discover installed peers. If your ES module application imports a private copy of jQuery, register that exact copy before the first plugin call. Pass your imported Moment instance as the second argument when your code uses Moment.

import $ from 'jquery';
import moment from 'moment';
import DateRangePicker from 'daterangepicker';
import 'daterangepicker/daterangepicker.css';

DateRangePicker.installJQuery($, moment);
$('#report').daterangepicker();

Move one input to native JavaScript

Use getInstance(element) to look up a mounted picker. Methods such as setStartDate and setEndDate work with either initialization style. Native listeners receive the picker in event.detail. jQuery handlers receive it as the second argument.

const input = document.querySelector('#report');
const picker = new DateRangePicker(input, {
  locale: { format: 'YYYY-MM-DD' }
});

input.addEventListener('apply.daterangepicker', event => {
  const { startDate, endDate } = event.detail;
  console.log(startDate.toDate(), endDate.toDate());
});

picker.setStartDate(new Date());

Choose one event interface for each action. Both interfaces emit events when the jQuery bridge is active. In a framework component, construct the picker after its input mounts and call picker.remove() when it unmounts. Run the native example.

Review code that uses Moment

When Moment is loaded before the classic build, callbacks and picker properties use real Moment objects, including the active locale and any plugins. Keep this integration for code that calls Moment-specific APIs or relies on custom locales or parsing.

The standalone build includes Day.js and exposes mutable picker dates with methods such as format(), clone(), add(), diff() and toDate(). Clone a picker date before changing it. Use toDate() at an interface that expects a JavaScript Date. For string inputs, supply the matching locale.format and check the formats and languages your application accepts before removing Moment.

Behavior to check during an upgrade

• Invalid input and invalid setter values leave the picker with usable dates. Presets outside the allowed dates are omitted. Overlapping presets are trimmed to the configured date and span limits.
• Each picker now cleans up its own event handlers and stored instance. Application handlers and unrelated data on the input survive removal or reinitialization.
• Range labels render as text. Replace markup embedded in labels with plain text.
• The default range picker still displays two calendars. Enable singleCalendar for a one-calendar range, or use singleDatePicker for just one date.
• Presets still apply immediately by default. Set applyOnRangeClick: false to allow adjustments before Apply, with autoApply turned off.

Browse the full API reference