How to create a JavaScript DatePicker using HTML code?
This Knowledge base article provides a step-by-step introduction on how to create a DatePicker control and build a simple HTML web application.
Pre-requisites
DatePicker Component Initialization
Create an app folder myapp in your local machine to initialize the Essential JS 2 JavaScript components.
Dependencies
- ej2-base
- ej2-buttons
- ej2-inputs
- ej2-popups
- ej2-calendars
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: https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js
Style: https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css
Example:
Script: https://cdn.syncfusion.com/ej2/ej2-calendars/dist/global/ej2-calendars.min.js Styles: https://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 as like the following code.
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 Calendar Component</title>
<!-- Essential JS 2 DatePicker'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 DatePicker'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 DatePicker component
var datepicker = new ej.calendars.DatePicker();
// Render the initialized DatePicker.
datepicker.appendTo('#element')
</script>
</body>
</html>
Else, you can render the DatePicker component by using the CDN link instead of component dependent package CDN link for rendering the Calendar 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>
Screenshot:
I hope you enjoyed learning about how to create a JavaScript DatePicker using HTML code.
You can refer to our JavaScript DatePicker featuretour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript DatePicker example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
