We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to render DatePicker control by configuring Syncfusion Bower Packages?

How to render DatePicker control by configuring Syncfusion Bower Packages?

Bower Installation:

To configure the Bower in your machine you need to install node, npm and git. For more information, to configure the Bower package please refer the official site for bower. Syncfusion JavaScript Bower package can be configured in the following ways.

  1. Using command prompt.
  2. Using bower.json file.
  3. From local directory.

1. Using Command Prompt

Perform the below steps to install Syncfusion Bower Package via command prompt in your web application.

  1. Open your web project’s location in a command prompt window.
  2. Then run the command Bower install.


Once the bower configuration is completed, the folder named called “bower_components” has been loaded into your corresponding project folder.

All the Syncfusion dependency Scripts, CSS and some of the Microsoft dependency files has been placed in the bower_componentsfolder as like the below screenshot.


Now Create a basic HTML file as shown below,


Referring Scripts and CSS

Include the specific theme reference to your HTML file by referring the appropriate ej.web.all.min.css file from a particular theme folder (bower_components/syncfusion-javascript/Content/ej/web/default-theme/ej.web.all.min.css) within the head section as shown below,


In the above example we have used default theme.

The, refer the external dependent script files which is given below,

  • jQuery
  • jsrender.min.js

Apart from the above dependent scripts, you need to refer the ej.web.all.min.js file, which contains all the JavaScript components script and globalize library packed together in a minified format from the particular folder (bower_components/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js).

Include the above mentioned script references in the head section of your HTML page as shown below,


Add the <input> element within the <body> section, which acts as a container for ejDatePicker widget to render and then initialize the ejDatePicker widget within the script section as shown below,



Open your HTML page in the web browser and the screen will display the DatePicker widget.

For the bower installation using bower.json and for the local directory options, please follow the instruction given in the below link


And after installing bower using the steps provided in the above link, you can refer the Scripts and CSS as like mentioned in above example.

Article ID: Published Date: Last Revised Date: Platform: Control:
7172 12/09/2016 12/09/2016 JavaScript General
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon