In this article I will explain with an example, how to implement jQuery DateTimePicker in HTML.
Download jQuery DateTimePicker Plugin
You will need to download the plugin files from the following location.
The complete documentation is available on the following page.
HTML Markup
The HTML Markup consists of an HTML TextBox and an HTML Input Button.
<input id="txtDateTime" type="text" />
<input id="btnSubmit" type="button" value="Submit" />
jQuery DateTimePicker Plugin implementation
Inside the HTML Markup, first the following CSS file is inherited.
1. jquery.datetimepicker.css
And then, the following JS scripts are inherited.
1. jquery.min.js
2. jquery.datetimepicker.full.js
Inside the jQuery document ready event handler, the HTML TextBox has been applied with the jQuery DateTimePicker plugin and the Button has been assigned with Click event handler.
When a Date and Time is selected and the Submit button is clicked, the value of the selected Date and Time is displayed using JavaScript Alert Message Box.
<link href="/plugin/jquery.datetimepicker.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="/plugin/jquery.datetimepicker.full.js"></script>
<script type="text/javascript">
$(function () {
$("#txtDateTime").datetimepicker();
$("#btnSubmit").on("click", function () {
var dt = new Date($("#txtDateTime").val()).toLocaleString();
alert("Selected Date and Time: " + dt);
});
});
</script>
Screenshot
![Implement jQuery DateTimePicker in HTML]()
Demo
Downloads
