Question 11043 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

I want to show 24 month by using date range picker calendar – Jquery

I used this calendar Date range picker in my web page, And want to show 24 months instead of 2 month.

I use this function numberOfMonts: '24' but it can’t work for me. please see codepen

Thanks in advance 🙂

Tags:

2

Answers


  1. 0

    The option numberOfMonts is not there in https://www.daterangepicker.com/

    Instead daterange picker you can use two date picker controls.

    <div class="input-group input-daterange col-md-4">
  <input type="text" class="start-date form-control" value="2012-04-05">
  <span class="input-group-addon">to</span>
  <input type="text" class="end-date form-control" value="2012-04-19">
</div>

    something like this

    enter image description here

    fiddle: https://codepen.io/ravidevgam/pen/PoYdYeE

    Login or Signup to reply.
  2. 0

    If I understood correctly you want to see 24 mini-calendars when you open the picker instead of 2. I think the only way at the moment is to change the library code.

    If you open datarangepicker.js from the source code you have currently at row 101 the template definition:

    options.template =
'<div class="daterangepicker">' +
    '<div class="ranges"></div>' +
    '<div class="drp-calendar left">' +
        '<div class="calendar-table"></div>' +
        '<div class="calendar-time"></div>' +
    '</div>' +
    '<div class="drp-calendar right">' +
        '<div class="calendar-table"></div>' +
        '<div class="calendar-time"></div>' +
    '</div>' +
    '<div class="drp-buttons">' +
        '<span class="drp-selected"></span>' +
        '<button class="cancelBtn" type="button"></button>' +
        '<button class="applyBtn" disabled="disabled" type="button"></button> ' +
    '</div>' +
'</div>';

    and can change it accordingly to have more of that drp-calendar divs (so 48 in that specific case).

    Then you have to build the calendars, there are the calls at rows 609-610 to renderCalendar that go to 619 renderCalendar: function(side) { ... and follow the changes, instead of using this.leftCalendar and this.rightCalendar you could use an array of calendars.

    I think it should be doable pretty easily, maybe I would do it parametric with your numberOfMonths.

    The downside is that you will have to do that all over again every time you update the library. If you plan to update frequently I don’t think it isn’t even worth the effort to do it on the library and you should do directly a complete custom code. From a brief view to that file it seems there isn’t any easy approach to make an injection in the code or extending the methods/classes, there is too much to rewrite to make the calendars general enough.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search