Calendar control using jQuery
In this article, I will be explaining to you how to implement the calendar control with one input and calendar image icon using jQuery. This jQuery calendar functionality is easy to implement, customize. We can also customize the calendar showing animations.
Introduction:
In most of the website applications we need to implement the Datepicker functionality. Mostly, all are immediately using the "Ajax Calendar". Using ajax control toolkit, we can implement this functionality very easy, but if we need to customize some functionalities, then it will be complicated. If we use the same functionality using jQuery, then we can customize whatever we need. Requirements:
For implementing this functionality we need the following files,
1) Uistyle.css
2) Theme.css
3) jQuery.min.js
4) jQuery.ui.min.js
You can download the above mentioned files from the jQuery site, or you can find those files from the attachment.Implementation steps:
Step 1:
First include the above mentioned files in your aspx page as follows,
<link rel="stylesheet" href="CSS/UIStyles.css" type="text/css" media="all" />
<link rel="stylesheet" href="CSS/Theme.css" type="text/css" media="all" />
<script src="Scripts/jQuery.min.js" type="text/javascript"></script>
<script src="Scripts/jQuery.ui.min.js" type="text/javascript"></script>Step 2:
Initialize the Datepicker function as follows,
<script type="text/javascript" language="javascript">
$(function() {
$("#datepicker").datepicker(
{
changeMonth: true,
changeYear: true,
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly:true
});
});
</script>
This "datepicker" function is a basic function for performing the calendar functionality with many options. In this example, I used only the textbox with the image icon.Step 3:
Design your webpage with one textbox and that textbox id should be "Datepicker". Refer the below code,
<input id="datepicker" type="text" />Explanations:
In step2, the jQuery initialize which control need to implement the datepicker functionality. In the above function, "#datepicker" is an id of your text box control. The datepicker function has many arguments. Here I used only few arguments.
Please refer the below site for more other arguments with details, http://jqueryui.com/demos/datepicker/
Changemonth: This argument is used to enable the month option with the dropdown. If you need to disable to select next or previous month from your calendar, just set this argument to false.
Changeyear: This argument also similar to change month argument. This option enable or disable the year.
Showon: If you want to show the calendar while clicking the button, then just set this option with button.
buttonImage: If you want to set an image to that button, then just set the image url to this option.
Reference: http://jqueryui.com/demos/datepicker/