具有 HTML 范围的最小/最大月份值

Question

我正在使用带有日期的 html 滑块，特别是每月日期。

范围输入类型不能很好地处理非整数值（尽管在紧要关头也可以与小数一起使用）。因此，我正在使用一组值来填充范围。

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

范围具有理论上可以解决此问题的最小值和最大值。月份类型输入的最小值和最大值属性可以采用 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>

Answer 1

points.max 需要是最大值的索引，而不是最大值本身。您将 points.max 设置为“2015-1”，但尝试将其设置为 60：

points.max = values.length - 1;