ejDateRangePicker

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>