Getting Started

16 Jan 20245 minutes to read

A new MVC application and required assemblies with dependent files

To get start with Essential ASP.NET MVC DatePicker, create a new MVC application and add the required assemblies in references and then refer the below specified dependent CSS file as well as scripts

To create a MVC project and add necessary assemblies you can use the help of the given MVC-Getting Started Documentation.

CSS file

External script files

  • jQuery (from the version 1.7.1 to 3.1.0)

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 EJMVC components and frameworks in single file.

If you are using NuGet packages, then required files to render the EJMVC components, will get included in corresponding location automatically in your application.

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 Layout CSHTML file with required CSS and script reference added to create the Essential ASP.NET MVC DatePicker

  • CSHTML
    • <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
       
    <link rel="stylesheet" href="http://cdn.syncfusion.com/24.2.3/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/24.2.3/js/web/ej.web.all.min.js"> </script>
    <script src="http://cdn.syncfusion.com/24.2.3/js/common/ej.unobtrusive.min.js"></script>

    </head>

    DatePicker Initialization

    The Essential ASP.NET MVC DatePicker can be created using HTML helper like below code example (Razor code)

  • CSHTML
    • @Html.EJ().DatePicker("datePicker")

    NOTE

    DatePicker is a form control, so on form submitting its value can be received by its name, and normally id has been treated as name. If you want to set the name manually you can use our HtmlAttributes property. You can get this property related information from here

    Get / Set value

    The Essential ASP.NET MVC DatePicker provides an options to configure all its properties and to get its value. DatePicker value can be assigned during initialization or at run time. Below code shows how to assign values at initialization.

  • CSHTML
    • @Html.EJ().DatePicker("datePicker").Value(System.DateTime.Now).DateFormat("yyyy/MM/dd")

    You can assign values to existing EJMVC DatePicker using its instance. Consider that you going to set date value at button click, refer the below code example.

  • JS
    • <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>

    NOTE

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

    Client Side 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 EJMVC DatePicker

  • CSHTML
    • @Html.EJ().DatePicker("datePicker").Value(System.DateTime.Now).ClientSideEvents(e => e.Change("onChange"))
	
    <script>    
    
    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);
    }     
    </script>

    Strongly Typed HTML Helper

    EJMVC DatePicker can be created using DatePickerFor extension, which behaves as strongly typed HTML helper. This reduce the run time issues while using model values in DatePickerFor , since it will find the issues if any in compilation time itself. Also, to know about the setting model properties to DatePickerFor control, please refer the link:

    https://www.syncfusion.com/kb/4670/how-to-define-properties-for-for-controls

    Please refer the below code to create the DatePickerFor control in your application

  • CSHTML
    • @Html.EJ().DatePickerFor(model => model.datepicker, (Syncfusion.JavaScript.Models.DatePickerProperties)ViewData["date"])
    @Html.ValidationMessageFor(model => model.datepicker1)