Как я могу создать слайдер, который бы отображал дату, и есть ли способ сделать так, чтобы маркеры появлялись на сайте в зависимости от положения слайдера? - PullRequest
Новая
       2

Как я могу создать слайдер, который бы отображал дату, и есть ли способ сделать так, чтобы маркеры появлялись на сайте в зависимости от положения слайдера?

0 голосов
/ 29 сентября 2019

В течение прошедшего дня я боролся за создание слайдера, который просто отображал бы дату, по какой-то причине, когда я пишу 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>

1 Ответ

0 голосов
/ 29 сентября 2019

Вам необходимо использовать ввод диапазона, а затем использовать его значение, чтобы установить значение ввода даты.Минимальное и максимальное значения диапазона должны основываться на количестве дней в диапазоне дат, которые извлекаются из минимальных и максимальных значений ввода даты.

Выполните обратное, чтобы установить ползунок диапазона на основе измененийк дате. 

// 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">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...