jQuery Datepicker with Icon

Today i will explain how to use jQuery Datepicker with Icon, it is very simple to use. We need the following libraries to use it.

<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>

jQuery Datepicker with Icon

Demo: https://jsfiddle.net/javedfiddle/v0nmpdx9/

HTML

In the below HTML i used class data for jQuery Datepicker and made it readonly so that user can not type date in this input field, they should need to insert date via calendar icon button then date will be entered as per our given format in JQuery.

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

JQuery

Change buttonImage URL, make sure you first upload image on your host then link to it. You can also change date format as per your need such as dd-mm-yy or set mm-dd-yy anything you wish. If you want that calendar should open when click on input field so change showOn: “button” to showOn: “both”.

$(function() {
 $( ".date" ).datepicker({
 dateFormat : 'dd/mm/yy',
 showOn: "button",
 buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
 buttonImageOnly: true,
 buttonText: "Select date"
 }); 
}); 

Complete Page

<html>
<head>
<title>jQuery Datepicker with Icon</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<input type="text" name="date" class="date" readonly placeholder="DD/MM/YYYY" />
<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>
<script>
$(function() {
 $( ".date" ).datepicker({
 dateFormat : 'dd/mm/yy',
 showOn: "button",
 buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
 buttonImageOnly: true,
 buttonText: "Select date"
 }); 
}); 
</script>
</body>
</html>

Demo: https://jsfiddle.net/javedfiddle/v0nmpdx9/

Leave your comments and share this tutorial with your friends, if you find this tutorial helpful. 🙂