Html datetime local - min и max не работают должным образом при использовании стрелок

Я создал два локальных элемента datetime в виде диапазона:

<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))]);

}

Это отлично работает при вводе даты или выборе даты в календаре (где даты вне диапазона просто не могут быть выбраны или введены). У меня проблема только при использовании стрелок - если я использую стрелки для выбора дня или времени, которые находятся ниже или выше диапазона, мой код работает отлично, но если я использую стрелки для выбора месяца, выходящего за пределы диапазона, он автоматически меняет месяц на месяц максимальной даты (когда я ниже минимальной даты, и наоборот, когда я выше максимальной даты).

Я не знаю, можно ли как-то с этим справиться, или, может быть, я что-то делаю не так?

В каком браузере вы тестируете или наблюдаете ли вы его поведение в нескольких браузерах? Не могли бы вы создать plnkr / stackblitz / jsdfiddle, чтобы продемонстрировать проблему

Capricorn 31.10.2018 15:20

Хром - и да, дай мне секундочку :)

some_name 31.10.2018 15:24
bl.ocks.org/Skov94/72a22d653b8141cd7036379c500369f2 - проблема, может например будет видно, если вы оставите кисть как есть и попытаетесь переместить месяц во втором поле ввода на один вверх, используя стрелку :)
some_name 31.10.2018 15:49
0
3
1 253
0

Другие вопросы по теме