Question

我创建了两个日期时间本地人作为范围：

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

}

在键入日期或在日历中选择日期时（这完全不能通过选择或键入日期而超出范围），此方法效果很好。我只在使用箭头时遇到问题-如果我使用箭头选择日期范围或以下的日期或时间，我的代码可以正常工作，但是如果我使用箭头选择日期范围以外的月份，自动将月份更改为最大日期的月份（当我低于最小日期时，而当我高于最大日期时则相反）。

我不知道这是否可以通过某种方式处理，或者我做错了什么？

HTML日期时间本地-使用箭头时的最小值和最大值无法正常工作

0 个答案: