如何获取日期输入的值？

Question

所以基本上我希望“租船”的价格在满足特定要求时发生变化。如果用户选择工作日的日期，它将从输入字段中获取值，价格为每小时 10 美元。如果是星期六，价格为每小时 15 美元，如果是星期天，则价格为每小时 20 美元。用户最多可租用10小时，底部为总价。

目前我只有输入字段的 HTML 代码，我什至不知道如何开始 JavaScript 部分。因此，如果有人可以教我们如何开始，将不胜感激！

<div id="main">
  
    <label for="which_date">Which date do you want to rent?</label>
    <input type="date" id="which_date_input" min="2022-05-02">
    <button id="submit">Submit</button>
  
    <label for="total_hours">How many hours do you want to rent? (Max 10 hours)</label>
    <input type="number" id="total_hours_input" placeholder="0" min="1" max="10">

    <p id="result"></p>

如果我想要的解释难以理解，我很抱歉，我是初学者JavaScript。

谢谢

Answer 1

这应该可以很好地说明您正在尝试做什么。您可以使用 input 事件和 target.value 来获取值。我通过解构得到 value：const {value} = target 它类似于 target.value。

如果您不想使用 real-time 结果，您可以使用 submitButton.addEventListener('submit', ... 之类的东西，而不是通过 querySelector 设置 submitButton。但如果您决定这样做，您仍然需要从“小时”输入元素中读取相同的 target.value。

// Do something with the results
const someAction = (amount) => {
  console.log(`The amount is: £${amount}`)
}

// Get the input element
const totalHoursInput = document.querySelector("#total_hours_input")

// Listen to the input event
totalHoursInput.addEventListener("input", ({
  target
}) => {

  // Get the day name
  const day = new Date().toLocaleString('en-us', {
    weekday: 'long'
  }).toLocaleLowerCase()

  const { value } = target // The input value 

  // Determine the correct rate
  let rate = 10  // Weekday default 
  if (day === "saturday") {
    rate = 15
  } else if (day === "sunday") {
    rate = 20
  }

  // do something with the rate x value
  someAction(rate * value)
})

Answer 2

<label for="which_date">Which date do you want the ticket for?</label>
<input type="date" id="which_date_input" value="" min="2022-05-02">

<button id="submit" onclick="getDate()">Submit</button>



<p id="result"></p>

<script>
function getDate() {
  var x = document.getElementById("which_date_input").value;
  document.getElementById("result").innerHTML = x;
}
</script>

现在使用你想在 var X 上应用的条件。取货日期将存储在你可以用于你的条件的 x 中。

Answer 3

你可以试试这样的...

function getPrice() {

  const whichDate = new Date(document.getElementById("which_date_input").value);

  const totalHours = document.getElementById("total_hours_input").value;

  let perHour = 10;

  if (whichDate.getDay() === 6) {
    perHour = 15;
  }

  if (whichDate.getDay() === 0) {
    perHour = 20;
  }

  document.getElementById("result").innerText = "Total price: $" + totalHours * perHour;

}

<div id="main">

  <label for="which_date">Which date do you want the ticket for?</label><br>
  <input type="date" id="which_date_input" min="2022-05-02"><br>

  <label for="total_hours">How many hours do you want to rent? (Max 10 hours)</label><br>
  <input type="number" id="total_hours_input" placeholder="0" min="1" max="10">
  <button id="submit" onclick="getPrice()">Submit</button><br>

  <p id="result"></p>

</div>

如何获取日期输入的值？

How do I grab the value of a date input?

html

javascript

date

input-field