Date Range Picker
Menu
v4.0.2 JavaScript component

Date Range
Picker

One input for dates, times, and ranges. Drop it into a webpage or use it with your favorite framework.

Get started Download ZIP
Live playground
Select a start date, then an end date.

Quick start

Choose how to load the picker. Each example uses the same JavaScript component and stylesheet.

index.html
<link rel="stylesheet" href="./daterangepicker.css">
<label for="dates">Report dates</label>
<input id="dates">

<script src="./daterangepicker.js"></script>
<script>
  new DateRangePicker('#dates');
</script>
Place the JavaScript and CSS beside your page.Run example ↗

Local v4 files JavaScript ↓ ES module ↓ CSS ↓

Serve the files from a CDN

These jsDelivr URLs pin both files to version 4.0.2. They become available when that version is published to npm.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/daterangepicker.css">
<label for="dates">Report dates</label>
<input id="dates">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/daterangepicker.js"></script>
<script>
  new DateRangePicker('#dates');
</script>

Integrations

Open a running app and inspect the source for mounting the picker, reading its value, and cleaning up.

ReactuseEffect and a DOM ref VueComposition API lifecycle AngularComponent lifecycle hooks SvelteMount and teardown TypeScriptTyped options and ES imports CommonJSBundle a require() entry jQueryPlugin and Moment callbacks AMDRequireJS module loading

Picker examples

Try all five pickers below. Each input has its own selection and copyable setup code.

View code
JavaScript

View code
JavaScript

View code
JavaScript

View code
JavaScript

View code
JavaScript

Open the configuration generator →

Migration guide

Coming from version 3?

Keep existing jQuery pickers running and migrate one page at a time.

Upgrade guide →