滑块值添加到日期

Question

我正在制作一个使用纯 JavaScript 添加日期的滑块。我需要滑块才能将元素的值添加到日期。

例如，如果滑块的值为 24，我需要在日期上加上 24 天。

我已经尝试添加到 getDate() 函数中，但是如果它是一个字符串，那么所做的就是将它加在一起。然后我尝试使用 parseInt() 将滑块的值变成一个整数，但是当我将该值添加到天数时，它会将天变成一个整数。

var sliderDate = document.getElementById('dateSlider');
var outputDate = document.getElementById('dateOutput');
var today = new Date();
var sliderAdded = today;
var day = sliderAdded.getDay();
var month = sliderAdded.getMonth();
var date = sliderAdded.getDate() + sliderDate.value;
var daysOfWeek = [
  "N/A",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday"
];
var nameOfMonths = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
];

var sliderDateValue = sliderDate.value;

//connection between slider and input textbox
outputDate.value = sliderDate.value;

sliderDate.oninput = function() {
  outputDate.value = this.value;

};
outputDate.oninput = function() {
  sliderDate.value = this.value;
};

function dateBoundries() {
  if (outputDate.value > 35) {
    outputDate.value = 35;
  } else if (outputDate.value < 0) {
    outputDate.value = 0;
  } else {}
}

if (date == 1 || date == 21 || date == 31) {
  suffix = "st ";
} else if (date == 2 || date == 22) {
  suffix = "nd ";
} else if (date == 3 || date == 23) {
  suffix = "rd ";
} else {
  suffix = "th ";
}

document.getElementById('dateTest').innerHTML =
  daysOfWeek[day] +
  " " +
  date +
  suffix +
  " " +
  nameOfMonths[month] +
  " " +
  today.getFullYear();

<h1>
  <span id="dateTest"></span>
  <input type="textbox" id="dateOutput" onfocusout="dateBoundries()"><br>
  <input type="range" min="1" max="35" value="1" class="slider" id="dateSlider">
  <br>
</h1>

Answer 1

var sliderDate = document.getElementById('dateSlider');
var outputDate = document.getElementById('dateOutput');

var daysOfWeek = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday"
];
var nameOfMonths = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
];

var sliderDateValue = sliderDate.value;



//connection between slider and input textbox
outputDate.value = sliderDate.value;

sliderDate.oninput = function() {
  var today = new Date();
  today.setDate(today.getDate() + Number(this.value));
  outputDate.value = this.value;
  formattedDate(today)

};
outputDate.oninput = function() {
  var today = new Date();
  today.setDate(today.getDate() + Number(this.value));
  sliderDate.value = this.value;
  formattedDate(today)
};


function dateBoundries() {
  if (outputDate.value > 35) {
    outputDate.value = 35;
  } else if (outputDate.value < 0) {
    outputDate.value = 0;
  } else {}
}



function formattedDate(dateN) {
  var date = dateN.getDate()
  if (date == 1 || date == 21 || date == 31) {
    suffix = "st ";
  } else if (date == 2 || date == 22) {
    suffix = "nd ";
  } else if (date == 3 || date == 23) {
    suffix = "rd ";
  } else {
    suffix = "th ";
  }
  document.getElementById('dateTest').innerHTML =
    daysOfWeek[dateN.getDay()] +
    " " +
    date +
    suffix +
    " " +
    nameOfMonths[dateN.getMonth()] +
    " " +
    dateN.getFullYear();
}

formattedDate(new Date());

</h1> <span id="dateTest"></span>
<input type="textbox" id="dateOutput" onfocusout="dateBoundries()"><br>
<input type="range" min="0" max="35" value="1" class="slider" id="dateSlider">
<br>

根据你的问题，我试过插入逻辑。如果满意请告诉我。在您的代码中，计算天数时出错，记住一周从星期日开始。

Answer 2

<h1>
   <span id="dateTest"></span>
   <input type="textbox" id="dateOutput"  onfocusout="dateBoundries()"><br>
   <input type="range" min="1" max="35" value="1" class="slider" id="dateSlider" onchange="dateOutput.value = parseInt(dateOutput.value) + parseInt(dateSlider.value);"><br>
</h1>

滑块值添加到日期

Slider value adding to date

javascript

html

html-input