javascript - jQuery slider 设置不正确的 ui.values

Question

我的 slider 的 min 值为 2012 年 1 月 1 日，max 值为 2018 年 12 月 31 日。

当我移动 min 日期 slider 时，由于某种原因，max 日期值会重置为 2018 年 11 月 23 日。

我认为这与这里的舍入问题类似>>> Jquery UI Slider incorrect max value但我不知道如何解决日期的舍入问题。

我记录了一堆 console.log 来查看 max 日期在哪里重置。基本上，一旦单击 slider ，jQuery slider 就会设置 min 和 max 值。我尝试在 slider API 的引擎盖下查看但这并没有多大帮助。我什至尝试了其他一些 Events 来查看它们的 ui.values 返回的内容，但无济于事。他们都将最大日期(错误地)重置为2018年11月23日。

底线:如何更改代码以使幻灯片 max 日期反射(reflect)实际 slider ？

代码:

$("#slider").slider({
  range: true,
  min: new Date("1/1/2012").getTime(),
  max: new Date("12/31/2018").getTime(),
  step: new Date("4/1/2010").getTime() - new Date("1/1/2010").getTime(),
  values: [new Date("1/1/2012").getTime(), new Date("12/31/2018").getTime()],
  slide: function(event, ui) {
    // console.log(new Date("12/31/2018").getTime());
    // console.log(ui.values);
    sliderBegDate = new Date(ui.values[0]);
    sliderEndDate = new Date(ui.values[1]);
    $("#dateLabel1").text("From " + formatTime(new Date(ui.values[0])));
    $("#dateLabel2").text(" to " + formatTime(new Date(ui.values[1])));

    updateCharts();
  }
});

Answer 1

问题似乎出在您的 step 值上 - 目前您一次前进 3 个月，这并不能平均划分为您的 min - max范围，因此它会调整您的 max 以适应 step

您可以更改您的最大值以适应，或者找到适合您的步数 - 在此演示中，我设置了步数 到 4 天，这有效

$("#slider").slider({
  range: true,
  min: new Date("1/1/2012").getTime(),
  max: new Date("12/31/2018").getTime(),
  step: 345600000,
  values: [new Date("1/1/2012").getTime(), new Date("12/31/2018").getTime()],
  
  slide: function(event, ui) {
    sliderBegDate = new Date(ui.values[0]);
    sliderEndDate = new Date(ui.values[1]);
    $("#dateLabel1").text("From " + new Date(ui.values[0]));
    $("#dateLabel2").text(" to " + new Date(ui.values[1]));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<div id="slider"></div>

<div id="dateLabel1">Demo</div>
<div id="dateLabel2">Demo</div>