Learning jQuery

By default the jQuery UI datepicker shows only one month in the datepicker. But in this post I will show you how can you display multiple months in jQuery datepicker. Read my other posts related to jQuery UI Datepicker.

1. Implement jQueryUI DatePicker with ASP.NET
2. Show Hand/Pointer cursor on image button with jQueryUI datepicker control
3. Disable Weekends in jQuery DatePicker
4. Enable weekends in jQuery Datepicker
5. Disable specific days in jQuery Datepicker
6. jQuery Datepicker does not work after Ajax Partial Postback

By default the datepicker looks like this.

And you will see how can you show multiple months in datepicker like.

jQuery UI datepicker provides a option "numberOfMonths", which allows you to set number of month to display at once. That means, you can show multiple month. To show 2 months together (as shown in image) then set "numberOfMonths" to 2.

$(document).ready(function(){
    $("#txtDate").datepicker({ numberOfMonths:2 });
});

You can also shows multiple months in multiple rows. If you set "numberOfMonths" value to [2,3] then it will show 3 months in 2 rows starting from current month. For example, If the current month is Jan then First row will show Jan, Feb and Mar where Second row will display Apr, May and June.

$(document).ready(function(){
    $("#txtDate").datepicker({ numberOfMonths:[2,3] });
});

Feel free to contact me for any help related to jQuery. I will gladly help you.