Miscellaneous

Enable / Disable

The control can be enabled / disabled using public methods, enable or disable.

HTML

$("#daterange").ejDateRangePicker();
       
      $("#daterange").ejDateRangePicker("disable");

HTML

$("#daterange").ejDateRangePicker("enable");

Allow Editing

Editing in input box can be disabled by setting the false value to allowEdit API. By default this will be false and we can edit the value in input box

HTML

$("#daterange").ejDateRangePicker({

            allowEdit: false

        });

Clear ranges

To clear the all selection and ranges in a popup we can make use of clearRanges method.

HTML

$("#daterange").ejDateRangePicker("clearRanges");

Add ranges

Add the preset ranges to DateRangePicker popup. we can make use of addRanges method.

HTML

$("#daterangepicker").ejDateRangePicker();
        // Create DateRangePicker instance
        var dateObj = $("#daterangepicker").data("ejDateRangePicker");
        dateObj.addRanges("new Range", [new Date("11/12/2019"),new Date("11/12/2021")] );

set Range

set the preset ranges to DateRangePicker popup.. we can make use of setRange method.

HTML

$("#daterangepicker").ejDateRangePicker();
        // Create DateRangePicker instance
        var dateObj = $("#daterangepicker").data("ejDateRangePicker");
        dateObj.setRange([new Date("11/12/2019"),new Date("11/12/2021")]);

popupHide

Close the DateRangePicker popup, if it is in opened state. we can make use of popupHide method.

HTML

$("#daterange").ejDateRangePicker();
          // hides the DateRangePicker popup
          $("#daterange").ejDateRangePicker("popupHide");

popupShow

Open the DateRangePicker popup. we can make use of popupShow method.

HTML

$("#daterange").ejDateRangePicker();
          // hides the DateRangePicker popup
          $("#daterange").ejDateRangePicker("popupShow");

WaterMark Text

The watermarkText property of the daterangepicker control allows an option to specifies the water mark text to be displayed in input text.

JAVASCRIPT

$(function () {
 
            $("#dateRangePicker").ejDateRangePicker({

               watermarkText: "Enter date"  // default value is “Select Range”

            });

        });

Execute the above code to render the following output.

showPopupButton

The showPopupButton property of the daterangepicker control allows an option to shows/hides the date icon button at right side of textbox, which is used to open or close the DateRangePicker calendar popup.

JAVASCRIPT

$(function () {
 
            $("#dateRangePicker").ejDateRangePicker({

              showPopupButton:false   
              
            });

        });

Execute the above code to render the following output.