javascript - JQuery - 月份计数的年营业额 - Jquery UI 滑块

Question

在尝试创建一个更有用的类似日期选择器的界面时，我遇到了一个有趣的问题。我正在使用滑块来更改列出日历的月份（2010 年 3 月、2010 年 4 月、2010 年 5 月等）。这里有一个非常简单的模型：

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

我需要首先获取当前月份并将其设置为滑块的开头。然后我需要在未来将最大值设置为 18 个月。那部分很简单。我遇到的问题是，当我在十二月时，滑块上的下一个位置需要更改年份。这就是我遇到的麻烦。这是我用于滑块的当前代码：

 $(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        
  })
;})

请让我知道我能做些什么来完成这项工作。非常感谢大家！

-B

Answer 1

Sorpigal 是对的……但我建议parseInt不要int……这是一个演示

 $(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 2

解决方案

在 onSlide 调用部分#calendar，您必须重新计算月份和年份：

$(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        
  })
;})

Answer 3

尝试：

 month: ui.value%12,

当十二月过去时，它将“环绕”

和一年：

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

所以它也会增加年份。