【问题标题】:Highstock inputDateParser fires three timesHighstock inputDateParser 触发 3 次
【发布时间】:2014-09-06 09:52:27
【问题描述】:

我不确定是什么原因导致它在通过date calendar 选择日期后触发三次。这是为rangeSelector设置的选项

rangeSelector:{
    enabled:true,
    inputEnabled: true,
    inputDateFormat: '%d/%m/%Y',
    inputEditDateFormat: '%d/%m/%Y',                    
    inputDateParser: function (value) {
        value = value.split('/');
        console.log(value);
        return Date.UTC(
          parseInt(value[0]),
          parseInt(value[1]) - 1,
          parseInt(value[2])
        );
    }
}

通过使用backbone.view jquery 选择器,这里是我如何启动图表

this.$el.highcharts(Options, this.extra);

extra 作为触发日期选择器的附加设置

highlightSer: function (chart){         
      setTimeout(function () {              
         $('input.highcharts-range-selector', $(chart.container).parent())
            .datepicker({
                format: "dd/mm/yyyy",    
                todayBtn: "linked",
                autoclose: true,
                todayHighlight: true,
                orientation: "auto right"
            });             
      }, 0);            
}

有人经历过吗?

【问题讨论】:

  • 你能提供现场演示,比如 jsfiddle 吗?谢谢。
  • 嗨 Pawel,这里是 jsFiddle jsfiddle.net/muhaimincs/L093jc7k
  • 嗯,这个问题肯定出在那个日历上。一旦删除它就可以正常工作(只需一个电话):jsfiddle.net/L093jc7k/10。不管怎样,你在使用Date.UTC() 时出错了,值的顺序是错误的(上面的例子已经解决了这个问题)。然后,阅读 this question 关于 datepicker 调用了 3 次。
  • 感谢您的修复。顺便说一句,每当我输入早于 1987 年 7 月的日期时,highchart 都会将其带回 1987 年 7 月。这是一个错误吗?
  • 您只能浏览图表上可用的日期。

标签: javascript highstock bootstrap-datepicker


【解决方案1】:

来自this SO 的@seeARMS 解决方案对我有用,但有一处修改:

为您的活动创建单独的函数

一个函数有 datePicker 方法和你的设置:

$('input_with_date_picker').datePicker({...});

一个单独的函数控制您的on changeDate 事件:

$(document).on('changeDate', 'input_with_date_picker', function({..do something..}));

或:

$('input_with_date_picker').on('changeDate', function({..do something..}));

更新:

由于您添加的功能,cmets 中的The fiddle you provided 正在按预期工作:

$('input.highcharts-range-selector').on('changeDate', function(e) {
    alert(e.date);                                     
});

在页面加载时,它会执行两次,因为您有两个匹配的元素。它们似乎都是由这个 JS 生成的:

rangeSelector:{
        enabled:true,
        inputEnabled:true,
        inputDateFormat:"%d/%m",
        inputEditDateFormat:"%d/%m/%Y",
        inputDateParser: function (value) {
            value = value.split('/');
            console.log(value);
            return Date.UTC(
                parseInt(value[0]),
                parseInt(value[1]) - 1,
                parseInt(value[2])
            );
        }       
    },

如果您更改任一元素的日期,该函数将执行一次,这就是您的帖子的目标。

您可能表示它不起作用,因为当您从 datePicker 选择新日期时,日期没有更新。我不知道为什么会这样,我不熟悉 highcharts。

【讨论】:

  • 这不是 Highchart 的解决方案。见this
  • 它似乎工作得很好。代码触发了两次,因为您有两个满足此条件的元素:$('input.highcharts-range-selector'):From 输入和 To 输入。如果不是,代码将触发 6 次,每次输入 3 次。
  • 我不明白你。你能提供示例 jsFiddle 吗?
  • 哈!我老婆是这么说的!你的小提琴是我的样本,因为你的小提琴按预期工作。查看我的更新。
猜你喜欢
  • 1970-01-01
  • 2011-03-17
  • 2016-12-12
  • 1970-01-01
  • 1970-01-01
  • 2014-05-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多