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.
- Using command prompt.
- Using bower.json file.
- From local directory.
1. Using Command Prompt
Perform the below steps to install Syncfusion Bower Package via command prompt in your web application.
- Open your web project’s location in a command prompt window.
- 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.
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.
