Getting Started

22 Jan 20246 minutes to read

A new web application with required files and assemblies

To get start with The EJWEB DatePicker, 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

ej.web.all.min.css - includes all widgets styles (To know more about theme refer Theming in Essential JavaScript Component)

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.globalize.min.js	To support the globalization.
ej.datepicker.min.js	DatePicker plugin.

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.

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

ej.web.all.min.js - includes all web widgets.

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.

Below is a simple site master page with required CSS and script references added to create EJWEB DatePicker in ASP.NET WEB application

HTML

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
       
    <link rel="stylesheet" href="http://cdn.syncfusion.com/13.4.0.63/js/web/flat-azure/ej.web.all.min.css" />
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"> </script>
    <script src="http://cdn.syncfusion.com/13.4.0.63/js/web/ej.web.all.min.js"> </script>
    <script src="http://cdn.syncfusion.com/13.4.0.63/js/common/ej.unobtrusive.min.js"></script>

    </head>

DatePicker Initialization

EJWEB DatePicker can be created using aspx code like as below code

HTML

<%--initialize DatePicker component--%>

    <ej:DatePicker runat="server" ID="datePicker"></ej:DatePicker>

NOTE

DatePicker is a form control, so on form submitting its value can be retrieved by its name. By default id has been treated as name, if “name” attribute is not specified.

Get / Set value

EJWEB DatePicker provides an options to configure all its properties and get its value. This DatePicker value can be assigned during initialization or at some action.
Below code shows how to assign values at initialization

HTML

<%--initialize DatePicker component with current date--%>

    <ej:DatePicker runat="server" ID="datePicker" Value="<%# DateTime.Now %>">
    </ej:DatePicker>

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

<script>

        //bind below onClick action to button
        function onClick() {

            //create instance for datePicker.
            // only after control creation we can get dateObj otherwise it throws exception.
            var dateObj = $("#datePicker").ejDatePicker('instance');

            //set value using date object
            dateObj.option('value', new Date());

            //get value using date object and displays in alert box
            alert(dateObj.option('value'));
        }
  
    </script>

In ASP.NET to bind all the data sources to their server controls, we can use Page.DataBind() in the code behind page. Please refer the below code example.

JAVASCRIPT

protected void Page_Load(object sender, EventArgs e)
        {
            Page.DataBind();
        }

NOTE

Existing EJWEB DatePicker instance can be created by jQuery.data() and you can control the API’s of DatePicker behavior.

DatePicker events

You can handle the all available Client side events in Essential JavaScript DatePicker. Refer the below code example to use the client side event in EJWEB DatePicker

HTML

<ej:DatePicker ID="datepicker1" ClientSideOnChange="onChange" Value="<%# DateTime.Now %>" runat="server"></ej:DatePicker>

    <script type="text/javascript">
    function onChange(args) {
        //args contains entire model of DatePicker to get the value of all properties.

        //alert popup shows the previous date and selected date.
        alert(" previous date is : " + args.prevDate + " \n selected date is : " + args.value);
    }

In Code Behind page,

JAVASCRIPT

protected void Page_Load(object sender, EventArgs e)
        {
            Page.DataBind();
        }

Also, EJWEB DatePicker components have support with server side events please refer the Server Side Events section to know about available server side events in this component.