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

					

				

				
			


			

				

					

						Lifecycle
					

					

						

					

					

						
						
					

				

				

					
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