How to Use jQuery Datepicker with Icon

We sometimes need to use calendar in our html forms. Today i will share how to use jQuery datepicker calendar with icon in our html form, for this purpose we will need the following libraries.

Libraries

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

HTML

<input type="text" name="date" class="date" readonly placeholder="DD/MM/YYYY" />

1	<input type="text" name="date" class="date" readonly placeholder="DD/MM/YYYY" />

As you can see above that i have used class named date, i will use the same class name in below jQuery, i have also make field readonly so that user can not write anything through keyboard instead user will click on calendar button to insert date.

jQuery

$(function() {
 $( ".date" ).datepicker({
 dateFormat : 'dd/mm/yy',
 showOn: "both",
 buttonImage: "b_calendar.png",
 buttonImageOnly: true,
 buttonText: "Select date",
 changeMonth: true,
 changeYear: true,
 yearRange: "-100:+0"
 }); 
});

$(function() {

$( ".date" ).datepicker({

dateFormat : 'dd/mm/yy',

showOn: "both",

buttonImage: "b_calendar.png",

buttonImageOnly: true,

buttonText: "Select date",

changeMonth: true,

changeYear: true,

yearRange: "-100:+0"

});

buttonImage in above jquery script showing image of calendar icon, you can set any other icon that you like, showOn: “both” will show calendar on click icon or text field. You can also set it to showOn: “button” if you want to open calendar on icon click only.

Demo Download

If you found this tutorial helpful so share it with your friends, developer groups and leave your comment.