时间戳

首页 > 解决方案 > 如何创建一个显示日期的滑块，有没有办法根据滑块的位置使标记出现在网站上？

javascript - 如何创建一个显示日期的滑块，有没有办法根据滑块的位置使标记出现在网站上？

问题描述

过去一天我一直在努力创建一个只显示日期的滑块，由于某种原因，当我写input type="date"而不是input type="range"滑块总是停止工作时。谁能给我看一个显示日期的滑块的示例代码？

还有一件事我想知道是否可以根据滑块的位置在网站中显示或隐藏图像/标记/文本？例如，如果我在我的网站中添加地图图像，我可以使用滑块在此地图上显示和消失不同的标记吗？如果这确实是可能的，请指出我可以阅读的资源！

编辑：很抱歉没有添加我的尝试，他们在这里。这是基于我在互联网上找到的一些滑块。这是滑块input type="date"不起作用的示例。如果我将其更改为input type="range"它会再次开始工作。

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<h1>Slider</h1>
<p>Slidertext</p>

<div class="slidecontainer">
  <input type="date" min="1900-1-1" max="1910-1-1" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

标签： javascripthtmldateslider

解决方案

您需要使用范围输入，然后使用其值来设置日期输入的值。范围的最小值和最大值应基于日期范围中的天数，这些天数是从日期输入的最小值和最大值中检索的。

反向操作以根据日期更改设置范围滑块。

// Parse date in YYYY-MM-DD format as local date
function parseISOLocal(s) {
  let [y, m, d] = s.split('-');
  return new Date(y, m - 1, d);
}

// Format date as YYYY-MM-DD
function dateToISOLocal(date) {
  let z = n => ('0' + n).slice(-2);
  return date.getFullYear() + '-' + z(date.getMonth() + 1) + '-' + z(date.getDate());
}

// Convert range slider value to date string
function range2date(evt) {
  let dateInput = document.querySelector('#d0');
  let minDate = parseISOLocal(dateInput.defaultValue);
  minDate.setDate(minDate.getDate() + Number(this.value));
  dateInput.value = dateToISOLocal(minDate);
}

// Convert entered date to range
function date2range(evt) {
  let date = parseISOLocal(this.value);
  let numDays = (date - new Date(this.min)) / 8.64e7;
  document.querySelector('#r0').value = numDays;
}

window.onload = function() {
  let rangeInput = document.querySelector('#r0');
  let dateInput = document.querySelector('#d0');
  // Get the number of days from the date min and max
  // Dates in YYYY-MM-DD format are treated as UTC 
  // so will be exact whole days
  let rangeMax = (new Date(dateInput.max) - new Date(dateInput.min)) / 8.64e7;
  // Set the range min and max values
  rangeInput.min = 0;
  rangeInput.max = rangeMax;
  // Add listener to set the date input value based on the slider
  rangeInput.addEventListener('input', range2date, false);
  // Add listener to set the range input value based on the date
  dateInput.addEventListener('change', date2range, false);
}
<input id="r0" type="range" min="0" max="3652" value="0"><br>
<input id="d0" type="date" min="1900-01-01" max="1910-01-01" value="1900-01-01">

推荐阅读