HTML datetime local - min и max не работают должным образом при использовании стрелок - PullRequest
0 голосов
/ 31 октября 2018

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

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

}

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...