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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s