Я создал два локальных даты и времени как диапазон:
<form class="dates">
<label for="minDate">From:</label>
<input type="datetime-local" id="minDate" value="2018-08-05T10:25:33" required>
<label for="maxDate">to:</label>
<input type="datetime-local" id="maxDate" value="2018-10-04T10:25:33" required>
</form>
И затем я устанавливаю минимальное и максимальное значения на основе моих данных, чтобы диапазон оставался в пределах моей диаграммы:
document.getElementById("minDate").min = formatDatetimes(xScale2.domain()[0])
document.getElementById("minDate").max = formatDatetimes(d3.timeHour.offset(xScale2.domain()[1],-1))
document.getElementById("maxDate").min = formatDatetimes(d3.timeHour.offset(xScale2.domain()[0],1))
document.getElementById("maxDate").max = formatDatetimes(xScale2.domain()[1])
Затем я попытался обработать события, когда введенные значения ниже / выше мин / макс, установив значение мин / макс:
//function that updates brush when date is changed in one of the input boxes
document.getElementById("minDate").onchange = function() {updateBrush_ondatechange()};
document.getElementById("maxDate").onchange = function() {updateBrush_ondatechange()};
function updateBrush_ondatechange(){
//make sure that the dates arent outside the barchart area
if(new Date(document.getElementById("minDate").value)<new Date(document.getElementById("minDate").min)){
document.getElementById("minDate").value = document.getElementById("minDate").min;
}
if(new Date(document.getElementById("maxDate").value)>new Date(document.getElementById("maxDate").max)){
document.getElementById("maxDate").value = document.getElementById("maxDate").max;
}
//move brush to chosen area
context.select(".brush").call(brush.move, [xScale2(new Date(document.getElementById("minDate").value)), xScale2(new Date(document.getElementById("maxDate").value))]);
}
Это прекрасно работает при наборе даты или выборе даты в каландре (когда даты вне диапазона просто не могут быть выбраны или напечатаны). Я испытываю проблему только при использовании стрелок - если я использую стрелки для выбора дня или времени, которые находятся ниже или выше диапазона, мой код работает отлично, но если я использую стрелки, чтобы выбрать месяц, который выходит за пределы диапазона, это автоматически меняет месяц на месяц максимальной даты (когда я ниже минимальной даты, и наоборот, когда я выше максимальной даты).
Я не знаю, можно ли это как-то обработать, или, может быть, я что-то не так делаю?