Jquery Datepicker: Show multiple months (custom number) in multiple lines

Question

I am trying to display calendar using jquery datepicker with specified date range. In one of the case, I would like to display 13 months in 3 lines.

I am able to display 12 months in 3 lines using: numberOfMonths: [3,4]

Please find the jsfiddle for the same.

score 1 · Answer 1 · answered Sep 01 '14 at 15:18

1

If you use numberOfMonths: [3,5] you will see 15 months, but only will be available the days that you have defined.

answered Sep 01 '14 at 15:18

JMir

137
1
10

Yeah that's correct but requirement is to show 13 months only not more – Mrudang Vora Sep 01 '14 at 15:22
1

Then you can use `numberOfMonths: 13`, but it will display all the months in a single row. – JMir Sep 01 '14 at 15:27
No again that's not what i require – Mrudang Vora Sep 01 '14 at 15:28
1

You can check the documentation: http://api.jqueryui.com/datepicker/#option-numberOfMonths "Multiple types supported: Number: The number of months to display in a single row. Array: An array defining the number of rows and columns to display." – JMir Sep 01 '14 at 15:33

score 0 · Accepted Answer · edited May 23 '17 at 11:50

I researched quite a bit on this and was able to find the solution.

I used numberOfMonths: [3,5] and then with the help of this link , tweaked the monthDiff logic to find the number of months to be removed from final calendar.

I found the class that datepicker uses to show each month div. Then, used slice and remove functions to remove the unrequired months.

//Add 1 to difference as we require the month with endDate too
$("#datepicker > div > div.ui-datepicker-group").slice(requiredMonths - totalMonths + 1).remove();

Please find the jsfiddle for the same.

Jquery Datepicker: Show multiple months (custom number) in multiple lines

2 Answers2