带HTML范围的最小/最大月份值



我正在使用一个带日期的html滑块,特别是每月的日期。

range输入类型不能很好地处理非整数值(尽管在必要时也可以用于小数)。因此,我使用一个值数组来填充范围。

然而实际范围…范围的…是不正确的。我假设浏览器依赖的回退在这里起作用。在Chrome上,它似乎默认为100。由于在填充范围的数组中有61个值,而不是100个,因此范围在第61个值之后中断。

range有最小值和最大值,理论上可以解决这个问题。month类型输入的最小和最大属性可以采用YYYY-MM形式的值。然而,我似乎无法获得这种格式的值在类型范围的输入工作。遗憾的是,月份输入在Chrome之外的支持有限,并且不提供此应用程序所需的界面类型。

我有什么办法来改善靶场的行为?

var values = ["2010-1", "2010-2", "2010-3", "2010-4", "2010-5", "2010-6", "2010-7", "2010-8", "2010-9", "2010-10", "2010-11", "2010-12", "2011-1", "2011-2", "2011-3", "2011-4", "2011-5", "2011-6", "2011-7", "2011-8", "2011-9", "2011-10", "2011-11", "2011-12", "2012-1", "2012-2", "2012-3", "2012-4", "2012-5", "2012-6", "2012-7", "2012-8", "2012-9", "2012-10", "2012-11", "2012-12", "2013-1", "2013-2", "2013-3", "2013-4", "2013-5", "2013-6", "2013-7", "2013-8", "2013-9", "2013-10", "2013-11", "2013-12", "2014-1", "2014-2", "2014-3", "2014-4", "2014-5", "2014-6", "2014-7", "2014-8", "2014-9", "2014-10", "2014-11", "2014-12", "2015-1"];
var points = document.getElementById('points');
let rangevalue0 = document.getElementById('rangevalue0');
points.max = values[values.length - 1];
points.oninput = function() {
rangevalue0.innerHTML = values[this.value];
};
<input type="range" id="points" min="2010-01" max="2015-1" step="1" />
<br /><output id="rangevalue0">Select Date</output>

分。Max需要是Max值的索引,而不是Max值本身。你是设定点。最大值为'2015-1',但尝试将其设置为60:

points.max = values.length - 1;

最新更新