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?

Platform: JavaScript |
Control: General |
Published Date: December 9, 2016 |
Last Revised Date: May 8, 2019

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.
         bower install syncfusion-javascript
    

 

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_components” folder as like the below screenshot.

bower

 

Now Create a basic HTML file as shown below,

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
          <title>My first HTML page</title>
       </head>
       <body>    
       </body>
  </html>

 

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,

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>My first HTML page</title>
        <link href="bower_components/syncfusion-javascript/Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" />
    </head>
    <body>            
    </body>
</html>

 

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,

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>My first HTML page</title>
        <link href="bower_components/syncfusion-javascript/Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" />
       <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <script src="bower_components/jsrender/jsrender.min.js"></script>
        <script src="bower_components/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js"></script>
    </head>
    <body>            
    </body>
</html>

 

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,

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>My first HTML page</title>
        <link href="bower_components/syncfusion-javascript/Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" />
       <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <script src="bower_components/jsrender/jsrender.min.js"></script>
        <script src="bower_components/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js"></script>
    </head>
    <body>  
          
      <input id="startDate" type="text" /> 
 
      <script type="text/javascript">
 
            $(function () {
               // initialization of ejDatePicker control
                $("#startDate").ejDatePicker();
            });
 
     </script>
    </body>
</html>

 

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

https://help.syncfusion.com/js/installation-and-deployment#configuring-syncfusion-bower-packages

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.

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

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