JQuery - Year Turnover on Month Count - Jquery UI Slider

Question

I have ran into an interesting issue while trying to create a more usable datepicker-like interface. I am using a slider to change the month of a listed calendar (Mar 2010, Apr 2010, May 2010, etc.) A very simple mock-up here:

http://dev.primestudiosllc.com/riverbank/

I will need to first get the current month and set that as the beginning of the slider. Then I will need to set the max to 18 months in the future. That part is pretty simple. The issue that I am running into is when i hit December the next position on the slider needs to change the year. This is what I am having trouble with. Here is the current code I am using for the slider:

 $(function() {
  $("#slider-range-min").slider({
     range: "min",
     value: 3,
     min: 1,
     max: 18,
     animate: true,
     slide: function(event, ui) {
   $("#calendar").calendarWidget({
     month: ui.value,
     year: 2010        
   })
  }
});

 $("#calendar").calendarWidget({
   month: 2,
   year: 2010        
  })
;})

Please let me know what I can do to make this work. Thanks a lot everyone!

-B

Answer 1

Try:

 month: ui.value%12,

When December is passed it will "wrap around"

And for year:

 year: 2010 + int(ui.value>0?ui.value/12:0)

So it increments the year as well.

Answer 2

Sorpigal is right... but I suggest parseInt instead of int... here's is a demo

 $(function() {
    $("#slider-range-min").slider({
      range: "min",
      value: 3,
      min: 1,
      max: 18,
      animate: true,
      slide: function(event, ui) {
        $("#calendar").calendarWidget({
          month: (ui.value % 12),
          year: 2010 + parseInt(ui.value/12)             
         })
      }
    });

    $("#calendar").calendarWidget({
      month: 2,
      year: 2010              
     })
;})​

Answer 3

solution

The part, where you on onSlide call #calendar, you have to recalculate both month and year:

$(function() {
  //on the beginning of the script
  var smonth = 2, syear = 2010; //start-month, start-year
  $("#slider-range-min").slider({
     range: "min",
     value: smonth,
     min: smonth,    /* THIS WORKS FOR */
     max: smonth+17, /* NEXT 18 MONTHS */
     animate: true,
     slide: function(event, ui) {
   $("#calendar").calendarWidget({
     month: (ui.value-1) % 12, //months are 0..11, so if you want to have 3=march on slider, -1 from ui.value :]
     year: syear+parseInt(ui.value / 12)
   })
  }
});

 $("#calendar").calendarWidget({
   month: smonth,
   year: syear        
  })
;})