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
1 2 3 | <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
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
1 2 3 4 5 6 7 8 9 10 11 12 | $(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.
If you found this tutorial helpful so share it with your friends, developer groups and leave your comment.
Facebook Official Page: All PHP Tricks
Hey JAVED UR REHMAN, thanks!
Is there a way to use the icon like placeholder?
This is incredible!
thanks so much for saving me