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.