In this article I will explain with an example, how to implement
jQuery DatePicker with Calendar Icon (Image) in HTML.
The
jQuery DatePicker plugin has a property
showOn which makes the
DatePicker (Calendar) to be shown only when the adjoining Button (Icon) is clicked.
HTML Markup
The HTML Markup consists of following element:
TextBox – For implementing
jQuery 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 implementation
Inside the HTML Markup, the following CSS file is inherited.
1. jquery-ui.css
And then, the following script files are inherited.
1. jquery.min.js
2. jquery-ui.min.js
Inside the
jQuery document ready event handler, the TextBox has been applied with
jQuery DatePicker plugin.
The
jQuery DatePicker plugin has been assigned with following properties:
showOn – button
The
jQuery DatePicker will be shown only when the Button next to the TextBox is clicked.
buttonImageOnly – true
The Button will be an Image.
buttonImage – URL
The URL of the Image file to be displayed as Button.
dateFormat – dd/mm/yy
The
jQuery DatePicker will set the selected Date in dd/MM/yyyy date format in TextBox.
<script type="text/javascript">
$(function () {
$("#txtDate").datepicker({
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'images/calendar.gif',
dateFormat: 'dd/mm/yy'
});
});
</script>
Screenshot
![Implement jQuery DatePicker with Calendar Icon (Image) in HTML]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
