ejDateRangePicker

31 Jan 201920 minutes to read

Input field that displays the two DatePicker type calendar in a single popup to select and set the different date ranges

Syntax

JAVASCRIPT

$(element).ejDateRangePicker(options)

Name	Type	Description
options	object	settings for Date Range Picker.

Example

HTML

<input type="text" id="daterangepicker" />
<script>
// Create DateRangePicker
$("#daterangepicker").ejDateRangePicker();
</script>

Requires

• module:jQuery

• module:ej.core.js

• module:ej.globalize.js

• module:ej.scroller.js

• module:ej.datepicker.js

• module:ej.timepicker.js

• module:ej.daterangepicker.js

Members

allowEdit boolean

Used to allow or restrict the editing in DateRangePicker input field directly. By setting false to this API, You can only pick the date ranges from DateRangePicker popup.

Default Value

• true

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set allowEdit API during initialization to deny edit  
        $("#daterangepicker").ejDateRangePicker({   allowEdit : false });
</script>

buttonText object

Sets the specified text value to the available buttons (Reset, Cancel, Apply) in the DateRangePicker popup.

Default Value

• { reset: “Reset”, cancel: “Cancel”, apply: “Apply”}

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set buttonText API during initialization  
        $("#daterangepicker").ejDateRangePicker({  buttonText : {
            reset: "Reset",
            cancel: "Cancel",
            apply: "Apply"} });
            
</script>

cssClass string

Sets the root CSS class for DateRangePicker theme, which is used to customize.

Default Value

• ””

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set cssClass API during initialization  
        $("#daterangepicker").ejDateRangePicker({  cssClass: "gradient-lime" });
</script>

dateFormat string

Formats the date value of the DateRangePicker in to the specified date format. If this API is not specified, dateFormat will be set based on the current culture of DateRangePicker.

Default Value

• “MM/dd/yyyy”

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set dateFormat API during initialization  
        $("#daterangepicker").ejDateRangePicker({  dateFormat: "dd/MM/yyyy" });
</script>

enableTimePicker boolean

Allows to embed the Timepicker align with the calendars in the page, two timepicker will be render, for selecting start and end date.

Default Value

• false

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set enableTimePicker API during initialization  
        $("#daterangepicker").ejDateRangePicker({  enableTimePicker: true });
</script>

enabled boolean

Enable or disable the DateRangePicker control.

Default Value

• true

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set enabled API during initialization  
        $("#daterangepicker").ejDateRangePicker({  enabled: false });
</script>

enablePersistence boolean

Sustain the entire widget model of DateRangePicker even after form post or browser refresh

Default Value

• false

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set enablePersistence API during initialization  
        $("#daterangepicker").ejDateRangePicker({  enablePersistence: true });
</script>

endDate string | date

Specifies the end date of the date ranges.

Default Value

• null

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set minDate value during initialization  
        $("#daterangepicker").ejDateRangePicker({  endDate: new Date("5/1/2013") });
</script>

height string | number

Specifies the height of the DateRangePicker input.

Default Value

• “28px”

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set height API during initialization  
        $("#daterangepicker").ejDateRangePicker({  height: 35 });
</script>

locale string

Change the DateRangePicker calendar and date format based on given culture.

Default Value

• “en-US”

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set locale API during initialization  
        $("#daterangepicker").ejDateRangePicker({  locale: "en-US" });
</script>

maxDate string | date

Specifies the maximum date in the calendar that the user can select as a startDate or endDate.

Default Value

• new Date(2099, 11, 31)

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set maxDate value during initialization  
        $("#daterangepicker").ejDateRangePicker({  maxDate : new Date("1/1/2018") });
</script>

minDate string | date

Specifies the minimum date in the calendar that the user can select as a startDate or endDate.

Default Value

• new Date(1900, 00, 01)

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set minDate value during initialization  
        $("#daterangepicker").ejDateRangePicker({  minDate: new Date("1/1/2017") });
</script>

ranges object

Used to add the preset ranges. Added ranges using this, will show in popup in right side for easy selection of different preset ranges.

Default Value:

• null

ranges.label string

Set the name to preset range

ranges.range array

Get and Set the startDate, end Date of predefined set ranges. The first argument to this field will consider as startDate, and second one will consider as endDate.

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set minDate value during initialization  
        $("#daterangepicker").ejDateRangePicker({  
ranges: [
            { label: "Today", range: [new Date(), new Date()] },
            { label: "Last 1 Week", range: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date()] },
            { label: "Last 1 Month", range: [new Date(new Date().setMonth(new Date().getMonth() - 1)), new Date()] },
            { label: "Last 2 Month", range: [new Date(new Date().setMonth(new Date().getMonth() - 2)), new Date()] },


        ],
            });
</script>

separator string

Used to separate the two date strings of the value in the DateRangePicker popup.

Default Value

• ”-“

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set different separator during initialization  
        $("#daterangepicker").ejDateRangePicker({  separator : "$" });
</script>

startDate string | date

Specifies the start date of the date ranges

Default Value

• null

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set startDate value during initialization  
        $("#daterangepicker").ejDateRangePicker({  startDate : new Date("5/30/2015") });
</script>

showPopupButton boolean

Shows/hides the date icon button at right side of textbox, which is used to open or close the DateRangePicker calendar popup.

Default Value

• true

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set showPopupButton API during initialization  
        $("#daterangepicker").ejDateRangePicker({  showPopupButton: false });
</script>

showRoundedCorner boolean

DateRangePicker input and popup is displayed with rounded corner when this property is set to true.

Default Value

• false

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set showRoundedCorner API during initialization  
        $("#daterangepicker").ejDateRangePicker({  showRoundedCorner : true });
</script>

timeFormat string

Formats the date value of the DateRangePicker in to the specified time format. If this API is not specified, timeFormat will be set based on the current culture of DateRangePicker.

Default Value

• “HH:mm tt”

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set timeFormat API during initialization  
        $("#daterangepicker").ejDateRangePicker({  timeFormat: "HH:mm" });
</script>

value string

Separated two date values in string format to sets the date ranges in calendars.

Default Value

• null

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set the DateRangePicker value during initialization  
        $("#daterangepicker").ejDateRangePicker({  value: "5/5/2014 - 6/6/2018") });
</script>

watermarkText string

Specifies the water mark text to be displayed in input text.

Default Value

• “Select Range”

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set watermarkText during initialization  
        $("#daterangepicker").ejDateRangePicker({  watermarkText: "Enter date" });
</script>

width string | number

Specifies the width of the DateRangePicker input text.

Default Value

• “160px”

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//To set width API during initialization  
        $("#daterangepicker").ejDateRangePicker({  width: 200 });
</script>

Methods

addRanges(label, range)

Add the preset ranges to DateRangePicker popup.

Name	Type	Description
label	string	Display name
range	array	StartDate and endDate of range.

Example

HTML

<input type="text" id="daterangepicker" />
<script>
$("#daterangepicker").ejDateRangePicker();
// Create DateRangePicker instance
var dateObj = $("#daterangepicker").data("ejDateRangePicker");
dateObj.addRanges("new Range", [new Date("11/12/2019"),new Date("11/12/2021")] ); // Add the preset ranges to DateRangePicker
</script>

clearRanges()

Clears the all ranges selections in DateRangePicker popup

Example

HTML

<input type="text" id="daterangepicker" />
<script>
$("#daterangepicker").ejDateRangePicker();
// create DateRangePicker instance
var dateObj = $("#daterangepicker").data("ejDateRangePicker");
dateObj.clearRanges(); // clear  the DateRangePicker ranges selection
</script>

HTML

<input type="text" id="daterangepicker" />
<script>
$("#daterangepicker").ejDateRangePicker();
// clears the DateRangePicker selection
$("#daterangepicker").ejDateRangePicker("clearRanges");
</script>

disable()

Disables the DateRangePicker control.

Example

HTML

<input type="text" id="daterangepicker" />
<script>
$("#daterangepicker").ejDateRangePicker();
// Create DateRangePicker instance
var dateObj = $("#daterangepicker").data("ejDateRangePicker");
dateObj.disable(); // disables the daterangepicker
</script>

HTML

<input type="text" id="daterangepicker" />
<script>
$("#daterangepicker").ejDateRangePicker();
// disables the daterangepicker
$("#daterangepicker").ejDateRangePicker("disable");
</script>

enable()

Enable the DateRangePicker control, if it is in disabled state.

Example

HTML

<input type="text" id="daterangepicker" />
<script>
$("#daterangepicker").ejDateRangePicker();
// Create DateRangePicker instance
var dateObj = $("#daterangepicker").data("ejDateRangePicker");
dateObj.enable(); // enables the daterangepicker
</script>

HTML

<input type="text" id="daterangepicker" />
<script>
$("#daterangepicker").ejDateRangePicker();
// enables the DateRangePicker
$("#daterangepicker").ejDateRangePicker("enable");
</script>

getSelectedRange()

Returns the startDate and endDate values in the selected ranges in the DateRangePicker control.

Returns:

Object

Example

HTML

<input type="text" id="daterangepicker" />
<script>
$("#daterangepicker").ejDateRangePicker();
// Create DateRangePicker instance
var dateObj = $("#daterangepicker").data("ejDateRangePicker");
dateObj.getSelectedRange(); // returns the start and end date values
</script>

HTML

<input type="text" id="daterangepicker" />
<script>
// returns the start and end date values
$("#daterangepicker").ejDateRangePicker();
$("#daterangepicker").ejDateRangePicker("getSelectedRange");
</script>

popupHide()

Close the DateRangePicker popup, if it is in opened state.

Example

HTML

<input type="text" id="daterangepicker" />
<script>
$("#daterangepicker").ejDateRangePicker();
// Create DateRangePicker instance
var dateObj = $("#daterangepicker").data("ejDateRangePicker");
dateObj.popupHide(); // hides the DateRangePicker popup
</script>

HTML

<input type="text" id="daterangepicker" />
<script>
$("#daterangepicker").ejDateRangePicker();
// hides the DateRangePicker popup
$("#daterangepicker").ejDateRangePicker("popupHide");
</script>

popupShow()

Opens the DateRangePicker popup.

Example

HTML

<input type="text" id="daterangepicker" />
<script>
$("#daterangepicker").ejDateRangePicker();
// Create DateRangePicker instance
var dateObj = $("#daterangepicker").data("ejDateRangePicker");
dateObj.popupShow(); // shows the DateRangePicker popup
</script>

HTML

<input type="text" id="daterangepicker" />
<script>
$("#daterangepicker").ejDateRangePicker();
// shows the DateRangePicker popup
$("#daterangepicker").ejDateRangePicker("popupShow");
</script>

setRange()

set the preset ranges to DateRangePicker popup.

Name	Type	Description
label	string | array	Display name | array of start date and end date

Example

HTML

<input type="text" id="daterangepicker" />
<script>
$("#daterangepicker").ejDateRangePicker();
// Create DateRangePicker instance
var dateObj = $("#daterangepicker").data("ejDateRangePicker");
dateObj.setRange("new Range"); //set the preset ranges to DateRangePicker
</script>

HTML

<input type="text" id="daterangepicker" />
<script>
$("#daterangepicker").ejDateRangePicker();
// Create DateRangePicker instance
var dateObj = $("#daterangepicker").data("ejDateRangePicker");
dateObj.setRange([new Date("11/12/2011"), new Date("11/12/2019")]); //set the predefined set of range DateRangePicker
</script>

Events

beforeClose

Fires before closing the DateRangePicker popup.

Name	Type	Description
cancel	boolean	Set to true when the event has to be canceled, else false.
model	object	returns the DateRangePicker model
type	string	returns the name of the event.
events	object	returns the event parameters from DateRangePicker.
element	Element	returns the DateRangePicker popup.

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//beforeClose event for DateRangePicker
$("#daterangepicker").ejDateRangePicker({
   beforeClose: function (args) {}
});  
</script>

beforeOpen

Fires before opening the DateRangePicker popup.

Name	Type	Description
cancel	boolean	Set to true when the event has to be canceled, else false.
model	object	returns the DateRangePicker model.
type	string	returns the name of the event.
events	object	returns the event parameters from DateRangePicker.
element	Element	returns the DateRangePicker popup.

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//beforeOpen event for DateRangePicker
$("#daterangepicker").ejDateRangePicker({
   beforeOpen: function (args) {}
});  
</script>

Change

Fires when the DateRangePicker values get changed.

Name	Type	Description
model	object	returns the DateRangePicker model.
type	string	returns the name of the event.
value	string	returns the DateRangePicker input value.
startDate	object	returns the startDate of DateRangePicker.
endDate	object	returns the endDate of the DateRangePicker popup.

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//Change event for DateRangePicker
$("#daterangepicker").ejDateRangePicker({
   change: function (args) {}
});  
</script>

close

Fires when DateRangePicker popup is closed.

Name	Type	Description
date	object	returns the current date object.
model	object	returns the DateRangePicker model.
type	string	returns the name of the event.
element	Element	returns the DateRangePicker popup.

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//close event for DateRangePicker
$("#daterangepicker").ejDateRangePicker({
   close: function (args) {}
});   
</script>

create

Fires when the DateRangePicker is created successfully.

Name	Type	Description
model	object	returns the DateRangePicker model.
type	string	returns the name of the event.

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//create event for DateRangePicker
$("#daterangepicker").ejDateRangePicker({
   create: function (args) {}
});
</script>

destroy

Fires when the DateRangePicker is destroyed successfully.

Name	Type	Description
cancel	boolean	Set to true when the event has to be canceled, else false.
model	object	returns the DateRangePicker model.
type	string	returns the name of the event.

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//destroy event for DateRangePicker
$("#daterangepicker").ejDateRangePicker({
   destroy: function (args) {}
}); 
</script>

open

Fires when DateRangePicker popup is opened.

Name	Type	Description
date	object	returns the current date object.
model	object	returns the DateRangePicker model.
type	string	returns the name of the event
element	Element	returns the DateRangePicker popup.

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//open event for DateRangePicker
$("#daterangepicker").ejDateRangePicker({
   open: function (args) {}
});  
</script>

select

Fires when a date ranges is selected from the DateRangePicker popup.

Name	Type	Description
startDate	object	returns the selected date object.
model	object	returns the DateRangePicker model.
type	string	returns the name of the event.
endDate	object	returns the current date value.

Example

HTML

<input type="text" id="daterangepicker" />
<script>
//select event for DateRangePicker
$("#daterangepicker").ejDateRangePicker({
   select: function (args) {}
}); 
</script>