使用日期选择器跳转到新页面

Question

我正在使用一个简单的 HTML 日期选择器：

<label for="start">Start month:
<input type="month" id="start" name="start" min="2017-01" max="2021-12" value="2020-05">
</label>

效果很好。我想选择日期（“2017-11”），并跳转到页面上的特定位置：

/reports/System_Uptime.html#2017-11

我需要什么 JavaScript 选择 month/year 并将其附加到 link 以在正确的锚点加载适当的页面？

这一定是以前在某个地方做过的，但我没有找到例子...

Answer 1

您可以将事件侦听器添加到 start 输入并且只是 location.href 它的值。

var start = document.querySelector("#start");

start.addEventListener("input",function(e){
   location.href = "#" + e.target.value;
});

Answer 2

您只需要设置一个 change 事件处理程序，将 location.href 更改为与日期选择器的 value 相连的静态值：

 document.getElementById("start").addEventListener("change", function(){
  alert("Going to: /reports/System_Uptime.html#" + this.value);
  location.href = "/reports/System_Uptime.html#" + this.value;
});

<label for="start">Start month:
<input type="month" id="start" name="start" min="2017-01" max="2021-12" value="2020-05">
</label>

使用日期选择器跳转到新页面

Using a Date Picker to jump to a new page

html

javascript

datepicker