jQuery установка неправильного значения ползунка

Question

У меня есть ползунок со значением min Jan 1, 2012 и значением max Dec 31, 2018.

Когда я перемещаю ползунок даты min, по какой-то причине значение даты max сбрасывается на Nov 23 2018.

Я думаю, что это похоже на проблему округления здесь >>> Jquery Неверное максимальное значение ползунка интерфейса пользователя , но я не знаю, как исправить проблему округления с помощью Date.

Я зарегистрировал группу console.log s, чтобы увидеть, где дата max сбрасывается. Как правило, ползунок jQuery устанавливает значения min и max после нажатия ползунка. Я попытался заглянуть под капот API ползунка , но это не очень помогло. Я даже попробовал некоторые другие Events, чтобы увидеть, что их ui.values вернулось безрезультатно. Все они сбрасывают дату max (неверно) на Nov 23 2018.

Итог: как я могу изменить свой код, чтобы получить дату слайда max для отображения фактического слайдера?

Код:

$("#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

Вы можете изменить то, что подходит вашему max, или найти сумму step, которая подходит вам - в этой демонстрации я установил 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>

Answer 2

@ Shiny - это правильно - это связано с вашим значением шага ... Чтобы продемонстрировать это, запустите приведенный ниже код, чтобы увидеть, какие даты попадают в «диапазон шага», который вы хотите ..

Если вы хотите перейти на 3 месяца за один раз, он кажется ближайшим к 31.12.2008 ( с , превышающим ), который вы можете получить, равен 1 / 1/2019 ..

let run = true,
  count = 0,
  safetyNet = 10000,
  startDate = new Date("1/1/2012"),
  stopDate = new Date("12/31/2018"),
  monthsToIncrement = 3,
  currentDate = new Date(startDate),
  values = [];

while (currentDate < stopDate && run) {
  count++;
  if (count >= safetyNet) {
    run = false;
  } else {
    values.push(currentDate);
    currentDate = new Date(currentDate.setMonth(currentDate.getMonth() + monthsToIncrement));
  }
}

let lastDate = new Date(values[values.length - 1]);

alert(`Starting at "${startDate.toLocaleDateString()}", and incrementing by "${monthsToIncrement}" months, the closest date we get to "${stopDate.toLocaleDateString()}" is "${lastDate.toLocaleDateString()}"..\r\n\r\nPress OK, and then open your browsers console to view all available values within this range.`);
console.log(values);