jQuery UI DateRangePicker

A jQuery UI widget similar to the date range picker used in Google Analytics; supports multiple months, custom preset ranges and smart positioning; ThemeRoller-ready and mobile-friendly.

Examples

The Basics

DateRangePicker can take a regular input element like this:

and turn it into:

Example Code

 <head> <link href="jquery-ui.min.css" rel="stylesheet"> <link href="jquery.comiseo.daterangepicker.css" rel="stylesheet"> <script src="jquery.min.js"></script> <script src="jquery-ui.min.js"></script> <script src="moment.min.js"></script> <script src="jquery.comiseo.daterangepicker.js"></script> <script> $(function() { $("#e1").daterangepicker(); }); </script> </head> <body> <input id="e1" name="e1"> </body>

Multiple Months

You can specify the number of months shown (the default is 3):

Example Code

 
 
 
 
 
 Placeholders 
 
A placeholder value is defined and will be displayed until a	selection is made:
 
 
 
 
 
 
 
Example Code
 
 
 
 
 
 
 Custom Preset Ranges 
 
	DateRangePicker supports custom preset ranges to serve your needs	(eg date ranges in the future): 
 
 
 
 
 
Example Code
 
 
 
 
 
 
 Programmatic Control 
 
DateRangePicker supports methods that allow programmatic	control of the component:
 
 
 
 
 
 
 
Example Code
 
 
 
  
 
 
 Events 
 
open is triggered when the dropdown opens.
 
close is triggered when the dropdown closes.
 
change is triggered when the date range changes.
 
clear is triggered when the clear button is used.
 
cancel is triggered when the cancel button is used.
 
 
 
 
 
 
 
Event Log
 
     
    Example Code
     
     
     
     
     
     
     API 
     
     
     
     Options 
     
     
     
     Option Type Default Description 
     
     presetRanges array see source  
    Array of objects. Each object describes an item in the	presets menu and must have the following properties:
     
     
     Property Type Description 
     
     text string the label of the menu option. 
     
     dateStart function returning a moment the start of the preset date range 
     
     dateEnd function returning a moment the end of the preset date range 
     
         		 
     
     initialText string 'Select date range...' Placeholder text - shown when no date range is	selected. 
     
     icon string 'ui-icon-triangle-1-s' CSS class of the icon shown inside the trigger button. 
     
     applyButtonText string 'Apply' Label of the Apply button. If the label is empty string the button will not be rendered. 
     
     clearButtonText string 'Clear' Label of the Clear button. If the label is empty string the button will not be rendered. 
     
     cancelButtonText string 'Cancel' Label of the Cancel button. If the label is empty string the button will not be rendered. 
     
     rangeSplitter string ' - ' String used between the start and end dates. 
     
     dateFormat string 'M d, yy' Displayed date format. See available	formats.  
     
     altFormat string 'yy-mm-dd' Submitted date format - used inside JSON {	"start": "...", "end": "..." }.  
     
     verticalOffset int 0 Vertical offset of the dropdown (measured from just	below/above the trigger button). Useful for custom borders. 
     
     mirrorOnCollision boolean true Use a mirrored layout (calendar followed by presets menu) when there is	not enough space on the right and the dropdown opens to the left. 
     
     autoFitCalendars boolean true Override the numberOfMonths from datepickerOptions	in order to fit widget width inside the viewport.  
     
     applyOnMenuSelect boolean true Use auto-apply when a preset date range is selected from the menu. 
     
     datepickerOptions object see source Object containing the options used to initialize the	jQuery UI datepicker widget. See all	available options.  
     
     open function null Callback that executes when the dropdown opens. 
     
     close function null Callback that executes when the dropdown closes. 
     
     change function null Callback that executes when the date range changes. 
     
     clear function null Callback that executes when the "Clear" button is used. 
     
     cancel function null Callback that executes when the "Cancel" button is used. 
     
     onOpen function null deprecated	Callback that executes when the dropdown opens. 
     
     onClose function null deprecated	Callback that executes when the dropdown closes. 
     
     onChange function null deprecated	Callback that executes when the date range changes. 
     
     onClear function null deprecated	Callback that executes when the clear button is used. 
     
     
     
     
     
     
     
     Methods 
     
     
     
     Option Return Type Description 
     
     open() jQuery (plugin only) Opens the dropdown. 
     
     close() jQuery (plugin only) Closes the dropdown. 
     
     setRange(range) jQuery (plugin only)  
    Sets the selected date range.
     
     
     Parameter Type Description 
     
     range Object 
    the date range.
     
     
     Property Type Description 
     
     start Date start of date range. 
     
     end Date end of date range; optional - start	is used by default.  
     
     
    Always use start-of-day	for any Date values.
    		 
     
         		 
     
     getRange() Object Gets the selected date range (the object has the same	properties as above). 
     
     clearRange() jQuery (plugin only) Clears the selected date range. 
     
     destroy() jQuery (plugin only) Removes the date range picker functionality completely.	This will return the element back to its pre-init state,	preserving any selected date range. 
     
     widget() jQuery Returns a jQuery object containing the	dropdown.  
     
     
     
     
     
     
     
     Events 
     
     
     
     Event Description 
     
     open Fired when the dropdown opens. 
     
     close Fired when the dropdown closes. 
     
     change Fired when the selected date range is changed. 
     
     clear Fired when the "Clear" button is used. 
     
     cancel Fired when the "Cancel" button is used. 
     
     
     
     
     
     
     
     About