The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers.
Create an app folder myapp
in local machine to initialize Essential JS 2 JavaScript components.
Using either of the following way to refer the required script and styles.
Step 1: You can get the global scripts and styles from the Essential Studio JavaScript (Essential JS 2) build installed location.
Step 2: To render DateTimePicker component, need to add DateTimePicker and its dependent packages from below installed location.
ej2-base
ej2-buttons
ej2-inputs
ej2-popups
ej2-lists
ej2-calendars
Syntax:
package:
**(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME
Example:
Package:
C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-base
packages:
C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-buttons
packages:
C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-inputs
packages:
C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-popups
packages:
C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-lists
Package:
C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-calendars
Step 3: Create a folder myapp/resources
and copy/paste the global scripts and styles from the above installed location to myapp/resources
location.
Step 4: Create a HTML page (index.html) in myapp
location and add the Essentials JS 2 script and style references.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 DateTimePicker Component</title>
<!-- Essential JS 2 material theme -->
<link href="resources/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
<link href="resources/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" />
<link href="resources/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" />
<link href="resources/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" />
<link href="resources/ej2-lists/styles/material.css" rel="stylesheet" type="text/css" />
<link href="resources/ej2-calendars/styles/material.css" rel="stylesheet" type="text/css" />
<!-- Essential JS 2 DateTimePicker's global script -->
<script src="resources/ej2-calendars/dist/global/ej2-calendars.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
Note: If you want to refer the combined component styles, please make use of our
CRG
(Custom Resource Generator) in your application.
Step 5: Now, add the input
element and initiate the Essential JS 2 DateTimePicker
component in the index.html
by using following code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 DateTimePicker Component</title>
<!-- Essential JS 2 material theme -->
<link href="resources/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
<link href="resources/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" />
<link href="resources/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" />
<link href="resources/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" />
<link href="resources/ej2-lists/styles/material.css" rel="stylesheet" type="text/css" />
<link href="resources/ej2-calendars/styles/material.css" rel="stylesheet" type="text/css" />
<!-- Essential JS 2 DateTimePicker's global script -->
<script src="resources/ej2-calendars/dist/global/ej2-calendars.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Add the HTML <input> element -->
<input id="element" />
<script>
// initialize DateTimePicker component
var DateTimePicker = new ej.calendars.DateTimePicker();
// Render initialized DateTimePicker.
DateTimePicker.appendTo('#element')
</script>
</body>
</html>
Step 6: Now, run the index.html
in web browser, it will render the Essential JS 2 DateTimePicker component.
Step 1: The Essential JS 2 components scripts and styles are already hosted in the below CDN link formats.
Syntax:
Script:
http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js
Style:
http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css
Example:
Script:
http://cdn.syncfusion.com/ej2/ej2-calendars/dist/global/ej2-calendars.min.js
Styles:
http://cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css
Step 2: Have to add CDN
global script and style for calender and its dependent packages in myapp/index.html
like below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 Calendar Component</title>
<!-- DateTimePIcker and its dependent theme -->
<link href="http://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" type="text/css" />
<!-- Essential JS 2 DateTimePicker's global script -->
<script src="http://cdn.syncfusion.com/ej2/ej2-calendars/dist/global/ej2-calendars.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Add the HTML <input> element -->
<input id="element" />
<script>
// initialize button component
var DatetimeObj = new ej.calendars.DateTimePicker();
// Render initialized button.
DatetimeObj.appendTo('#element')
</script>
</body>
</html>
When referencing CDN links in application, always ensure the network connection will be in enabled state.
The minimum and maximum date time can be defined with the help of min
and max
property.
The following example demonstrates to set the min
and max
on initializing the
DateTimePicker.
var datetimepicker = new ej.calendars.DateTimeePicker({
//sets the minimum date and time
min: new Date("11/22/2019 12:00 PM"),
//sets the maximum date and time
endDate: new Date("11/25/2019 5:00 PM")
});
datetimepicker.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 DateTimePicker control</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="styles.css" rel="stylesheet">
<!--style reference from the DateTimePicker component-->
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet">
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<input id="element" type="text">
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
If the value of
min
ormax
properties changed through code behind, then you have to update thevalue
property to set within the range.