How to get started easily with an example of Javascript TimePicker control?
This article explains a step-by-step introduction to configure the Syncfusion JavaScript (ES5) TimePicker control (Essential JS 2) and building a simple HTML web application.
Pre-requisites
TimePicker Component Initialization
Create an app folder myapp in your local machine to initialize the Essential JS 2 JavaScript components.
Use either of the following ways to refer to the required script and styles.
- Using local script and style references in an HTML page.
- Using the CDN link for script and style references.
Using local script and style references in an HTML page
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 the TimePicker component, you need to add the TimePicker and its dependent packages from the following installed location.
Dependencies
- ej2-base
- 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-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 the myapp/resources location.
Step 4: Create an HTML page (index.html) in the 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 TimePicker Component</title> <!-- Essential JS 2 TimePicker's dependent material theme --> <link href="resources/base/styles/material.css" rel="stylesheet" type="text/css" /> <link href="resources/buttons/styles/material.css" rel="stylesheet" type="text/css" /> <link href="resources/calendars/styles/material.css" rel="stylesheet" type="text/css" /> <!-- Essential JS 2 all script --> <!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> --> <!-- Essential JS 2 TimePicker's dependent scripts --> <script src="resources/base/dist/global/ej2-base.min.js" type="text/javascript"></script> <script src="resources/inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script> <script src="resources/buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script> <script src="resources/lists/dist/global/ej2-lists.min.js" type="text/javascript"></script> <script src="resources/popups/dist/global/ej2-popups.min.js" type="text/javascript"></script> <script src="resources/calendars/dist/global/ej2-calendars.min.js" type="text/javascript"></script> </head> <body> </body> </html>
Step 5: Now, add the input element and initialize the Essential JS 2 TimePicker component in the index.html by using the following code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 TimePicker Component</title>
<!-- Essential JS 2 TimePicker's dependent material theme -->
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" type="text/css" />
<!-- Essential JS 2 all script -->
<!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> -->
<!-- Essential JS 2 TimePicker's dependent scripts -->
<script src="//cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="//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 the TimePicker component
var TimePicker = new ej.calendars.TimePicker();
// Render the initialized TimePicker.
TimePicker.appendTo('#element')
</script>
</body>
</html>
Step 6: Now, run the index.html in a web browser. It will render the Essential JS 2 TimePicker component.
Using CDN link for script and style reference
Step 1: The Essential JS 2 components scripts and styles are already hosted in the following 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: You should add the CDN global script and style for the calendar and its dependent packages in the myapp/index.html in the following code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 Calendar Component</title>
<!-- Essential JS 2 TimePicker's dependent material theme -->
<link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" type="text/css" />
<!-- Essential JS 2 all script -->
<!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> -->
<!-- Essential JS 2 TimePicker's dependent scripts -->
<script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="https://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 the TimePicker component
var timeObj = new ej.calendars.TimePicker();
// Render the initialized Timepicker.
timeObj.appendTo('#element')
</script>
</body>
</html>
Else, you can render the TimePicker component by using the CDN link instead of the component dependent package CDN link for rendering the TimePicker as mentioned below.
<!-- Syncfusion Essential JS 2 Styles --> <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css" /> <!-- Syncfusion Essential JS 2 Scripts --> <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
Also, you can download and run the sample from this link. Refer to our documentation and online samples for more features.
If you have any queries, please let us know in the comments section below. You can also contact us through our Support forum or BoldDesk Support. We are happy to assist you!
