In this article I will explain with an example, how to implement
jQuery DatePicker in HTML.
HTML Markup
Inside the HTML Markup, first the following CSS file is inherited.
1. jquery-ui.css
And then, the following JS script files are inherited.
1. jquery.min.js
2. jquery-ui.js
The following HTML Markup consists of:
TextBox – For displaying DatePicker.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<input type="text" id="txtDate" />
jQuery DatePicker Plugin implementation
Inside the
jQuery document ready event handler, the HTML TextBox has been applied with the
jQuery DatePicker plugin.
The
jQuery DatePicker plugin has been assigned with the following properties:
showOn – button
For showing
jQuery DatePicker only when the Button next to the TextBox is clicked.
buttonImageOnly – true
This indicates that the Image will be a Button.
buttonImage – URL
The path of the Image file to be displayed as Button.
format – mm/dd/yy
The
jQuery DatePicker will set the selected Date in MM/dd/yyyy date format in TextBox.
<script type="text/javascript">
$(function () {
$("#txtDate").datepicker({
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'images/calendar.png',
dateFormat: 'mm/dd/yy'
});
});
</script>
Screenshot
![Using jQuery DatePicker in HTML]()
Demo
Downloads
