This tutorials shows how you can make the jQuery datePicker appear on click of the Calendar Icon. Also, teaches how you can change the date format of date picker.
Lets begin the tutorial.
Here is the JavaScript Part:
$(function() {
$("#datepicker").datepicker({
//showOn: both - datepicker will appear clicking the input box as well as the calendar icon
//showOn: button - datepicker will appear only clicking on the calendar icon
showOn: 'button',
buttonImage: 'x_office_calendar.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showAnim: 'slideDown',
duration: 'fast',
dateFormat: 'dd-mm-yy'
});
});
#datepicker is the input box id and showOn is the calendar icon option. You can use any image there.
dateFormat option is to format the date as you wish, some examples are:
mm/dd/yy - 16/05/1987 yy-mm-dd - 1987-05-16 d M, y - 16 May, 87 DD, d MM, yy - Monday, 16 May, 1987 'day' d 'of' MM 'in the year' yy - day 16 of May in the year 2011
Here is the entire code, just copy paste in notepad and save with extension .html and open in any browser:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Date Picker on click of Calendar Icon</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#ui-datepicker-div { font-size: 12px; }
#datepicker{float:left; height:18px;}
h1{font-size: 15px;}
</style>
<script>
$(function() {
$("#datepicker").datepicker({
//showOn: both - datepicker will appear clicking the input box as well as the calendar icon
//showOn: button - datepicker will appear only on clicking the calendar icon
showOn: 'button',
//you can use your local path also eg. buttonImage: 'images/x_office_calendar.png'
buttonImage: 'https://theonlytutorials.com/demo/x_office_calendar.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showAnim: 'slideDown',
duration: 'fast',
dateFormat: 'dd-mm-yy'
});
});
</script>
</head>
<body>
<h1>jQuery Date picker with Calendar Icon Tutorial - <a href="https://blog.theonlytutorials.com">Blog.Theonlytutorials.com</a></h1>
<input type="text" id="datepicker" value="23-11-2013">
</body>
</html>
Hi Agurchand ,
I have save this and write code like this below example..
but file not getting run….please help me…how to save jquery-ui.css and jquery-1.9.1.js and jquery-ui.js….
————————————————–
how to set min max values