Getting Started with JavaScript DatePicker

29 Nov 20235 minutes to read

A new HTML document and required codes

To get start with DatePicker, create a new HTML file and refer the below specified dependent CSS file as well as scripts files.

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.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 ‘ej’ web 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.

A simple HTML file with required CSS and script reference added to create DatePicker

  • HTML
    • <!DOCTYPE html>

    <html>

    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />

        <!-- style sheet for default theme(flat azure) -->

        <link href="http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.web.all.min.css"
              rel="stylesheet" />

        <!--scripts-->

        <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.11.3.min.js"></script>

        <script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js"></script>

    </head>

    <body>

        <!--Place input element to create DatePicker-->

        <script>

            // Place your script code here to initialize DatePicker

        </script>

    </body>

    </html>

    DatePicker Initialization

    DatePicker can be created using ‘input’ element

  • HTML
    • <!--input element to create DatePicker-->

    <input id="datePicker" />
  • JAVASCRIPT
    • $(function () {

            // initialize DatePicker component

            $("#datePicker").ejDatePicker();

        });

    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

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

  • JAVASCRIPT
    • $(function () {

            // create DatePicker from input with current date value.

            $("#datePicker").ejDatePicker({

                value: new Date(), // sets the current date

                dateFormat: "yyyy/MM/dd" // sets the date format

            });

        });

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

  • JAVASCRIPT
    • //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'));

        }

    NOTE

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