jQuery UI DatePicker – Display Multiple Months

Here’s how to display multiple months in the jQuery UI DatePicker using the ‘numberOfMonths’ option.

<label>Multiple Month DatePicker: </label>
<
input id="date2" />
<
script type="text/javascript">
$(function() {
var dt = {
numberOfMonths: 2
};
$("#date2").datepicker(dt);
});
</script>

image

You can even change the DatePicker UI using the different options available. For example, if you wanted to display the year as a dropdown field and also specify the range of years in the dropdown, use the following code:

<body>
<
label>Multiple Month DatePicker: </label>
<
input id="date2" />
<
script type="text/javascript">
$(function() {
var dt = {
changeYear: true,
yearRange: "-3:+3"
};
$("#date2").datepicker(dt);
});
</script>
</
body>

image

The UI shown above displays the year as a dropdown field and displays a range of 3 years both backwards and forward. You can check similar DatePicker options over here to configure the jQuery UI DatePicker



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

2 comments:

Anonymous said...

Excellent tip, thanks very much for sharing, there is really smart material in this Web site.

Gaurav Kumar said...

thanks but how to show permanent ??