Google Style Historical Date Range Picker Plugin with jQuery

File Size: 51.7 KB
Views Total: 4889
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Google Style Historical Date Range Picker Plugin with jQuery

A jQuery, jQuery UI and moment.js based date range picker that supports historical date range options as you seen on some Google Applications like Google Analytics, Google Adsense, etc.

How to use it:

1. Load jQuery library, moment.js and jQuery UI datepicker widget on your web page.

<link rel="stylesheet" href="//"> 

<script src="//"></script>
<script src="//"></script>
<script src="//"></script>

2. Load the jquery-daterange-picker.css and jquery-daterange-picker.js after jQuery library.

<link rel="stylesheet" href="jquery-daterange-picker.css">
<script src="jquery-daterange-picker.js"></script>

3. Create a normal text field to accept the date range input.

<input id="daterange" readonly>

4. Create an empty element for the date range picker container.

<div id="daterange-picker-container"></div>

5. Call the plugin on the input field and set the default date range.

  container: '#daterange-picker-container',
  defaultDateRange: 'LAST_30_DAYS'

6. Options and defaults.

container: null,
numberOfMonths: 3,
datepickerShowing: true,
defaultDate: '-1D',

   LAST_30_DAYS */
defaultDateRange: 'LAST_7_DAYS',

maxDate: '-1D',
minDate: new Date(2011, 0, 1),
test: false,
today: null

Change logs:


  • Standardize formatting and use cached selectors


  • Enable custom date selection after selecting a pre-defined date range option

This awesome jQuery plugin is developed by malchak. For more Advanced Usages, please check the demo page or visit the official website.