Getting Started

13 Jul 20172 minutes to read

New HTML Document and required codes:

To get start with The EJWEB DateRangePicker, create a new web application and add the required assemblies in references and then refer the below specified dependent CSS file as well as scripts

To create a web application and to add necessary assemblies you can use the help of the given ASP-Getting Started documentation.

CSS file

External script files

  • jQuery (from the version 1.7.1 to 3.1.0)

NOTE

From V13.4.0.53 onwards, jQuery.globalize.min.js file has been replaced with our script file ej.globalize.min.js to support the globalization for our widgets. For version lower than 13.4.0.53, refer jQuery.globalize.min.js. jQuery.easing external dependency has been removed from version 14.3.0.49 onwards. Kindly include this jQuery.easing dependency for versions lesser than 14.3.0.49 in order to support animation effects.

Internal script files

File  Description / Usage
ej.core.min.js
 Includes only the widget basic functions and Framework features. Must be referred always before using all the JS controls
ej.scroller.min.js To enable the scroll bar with preset ranges if count exceeded
ej.globalize.min.js
 To support the globalization.
ej.datepicker.min.js
 DatePicker plugin.
ej.timepicker.min.js TimePicker plugin
ej.daterangepicker.min.js DateRangePicker Plugin

You can make use of ej.web.all.min.js file which encapsulates all EJWEB components and frameworks in single file.

NOTE

In production, we highly recommend you to use our custom script generator to create custom script file with required controls and its dependencies only. Also to reduce the file size further please use GZip compression in your server.

DateRangePicker Initialization

You can add the following code example to the corresponding ASPX page to render the DateRangePicker.

  • HTML
    • <ej:DateRangePicker ID="dateRange" runat="server"></ej:DateRangePicker>

    Get/Set Value

    DateRangePicker provides an options to configure all its properties and to get its value. DateRangePicker value can be assigned during initialization or at run time. Below code shows how to assign the values at initialization.

  • HTML
    • // initialize DateRangePicker component with Value API

     <ej:DateRangePicker ID="dateRange" runat="server" Width="100%" Value="11/1/2013 - 12/3/2019"></ej:DateRangePicker>

    You can assign values after initialization in DateRangePicker (‘it helps to get or set value at run time). Let’s consider that going to set date range at button click.

  • HTML
    • //bind below onClick action to button

        function onClick() {

            //create instance for dateRangePicker.

            // create instance only after control creation, to get dateRangeObj otherwise it throws exception.

            var dateRangeObj = $('#<%=dateRange.ClientID%>').ejDateRangePicker('instance');

                //set value using date range picker object

                dateRangeObj.option('value', "11/1/2013 - 12/3/2019");

                //get value using date range object and displays in alert box

                alert(dateRangeObj.option('value'));

            }