Question

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

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

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

 $(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 ......这里是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 2

尝试：

 month: ui.value%12,

当12月通过时，它将“环绕”

一年：

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

所以它也增加了一年。

Answer 3

溶液

您在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        
  })
;})

JQuery - 月数上的年度营业额 - Jquery UI Slider

3 个答案:

溶液