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.

Facebook Official Page: All PHP Tricks