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

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              
     })
;})​