JQRangeSlider未设置自定义边界

时间:2014-06-03 18:50:26

标签: javascript jquery json jquery-plugins

我有一个JSON对象,格式如下:

  var dataset =  
  [
  {
    "date_hour": "2014-04-30T18:30:00Z",
    "mv": "OTHERS",
    "time_period": "Daily",
    "platform": "MWEB"
  },
  {
    "date_hour": "2014-04-30T18:30:00Z",
    "mv": "SEO",
    "time_period": "Daily",
    "platform": "CORESITE"
  },
  {
    "date_hour": "2014-04-30T18:30:00Z",
    "mv": "EMAIL",
    "time_period": "Hourly",
    "platform": "MWEB"
  }]

我必须为此数据创建一个日期时间滑块。我正在使用JQRangeSlider来实现此目的。这是代码片段:

  var min = dataset[0].date_hour
  var max = dataset[dataset.length - 1].date_hour;
  $("#slider").dateRangeSlider({
      bounds: {min: "min",max: "max"}
      });

我的实际数据集很大并且也是排序的。所以,最小值和最大值都存储了最小和最大时间戳值。但是,滑块的边界没有设置。传递这样的变量是错误的。还是有其他方法可以做到这一点?

1 个答案:

答案 0 :(得分:1)

小部件jQRangeSlider仅接受边界作为日期对象。您正在重新搜索的JSON数据包含字符串中的日期值。

其次,在您的示例中,bounds对象接收" min"和" max"字符串作为边界。我想这里有一个错字。

  1. 解析日期值以创建javascript Date个对象
  2. 使用这些日期设置边界选项
  3. 我的建议:

    // Be sure not to change your date format
    var min = new Date(dataset[0].date_hour),
        max = new Date(dataset[dataset.length - 1].date_hour);
    
    $("#slider").dateRangeSlider({
      bounds: {min: min, max: max}
      });