输入类型日期的操作如何工作？

Question

所以我试图创建一个页面，要求用户输入一些信息，包括生日，然后在最初的空白区域中显示这些信息，但我想知道如果

它是如何工作的

<input type="date" id="birth">

然后在脚本标签内

<script>
var a = document.getElementById('birth').value;
</script>

现在“a”是一个具有设定值的新日期（）吗？或者它到底是如何工作的？ 因为如果用户单击带有 onclick 事件的按钮，我试图执行一个函数，但它没有被执行，这让我质疑日期类型如何开始工作

我尝试将类型日期更改为类型文本，并让用户输入日期为“dd/mm/yyyy” 然后收集它，但我再次不知道我们是否有

<input type="text" id="birth2">     

如果我做

<script>
var b = document.getElementById('birth2').value; 
</script> 

我可以将“b”转换为Array()（每个项目用“/”分隔），然后控制日期是否正确（没有负值，月份在1到12之间......）？ 如果有人知道的话请告诉我

Answer 1

当您使用

<input type="date">

时，从 document.getElementById('birth').value 获得的值是一个表示日期的字符串，格式为 'YYYY-MM-DD'。它不会自动转换为 JavaScript Date 对象。如果您想将其作为 Date 对象使用，则需要显式转换它：

---

<input type="date" id="birth">
    <button onclick="displayDate()">Display Date</button>
    
    <script>
    function displayDate() {
      var dateString = document.getElementById('birth').value;
      var dateObject = new Date(dateString);
      console.log(dateObject);
    }
    </script>

---

如果您选择使用

<input type="text">

作为日期输入，您可以将值拆分为数组并手动验证日期：

<input type="text" id="birth2">
<button onclick="validateDate()">Validate Date</button>

<script>
function validateDate() {
  var dateString = document.getElementById('birth2').value;
  var dateArray = dateString.split('/');

  var day = parseInt(dateArray[0], 10);
  var month = parseInt(dateArray[1], 10);
  var year = parseInt(dateArray[2], 10);

  // Perform your validation here
  if (isValidDate(day, month, year)) {
    console.log('Valid date');
  } else {
    console.log('Invalid date');
  }
}

function isValidDate(day, month, year) {
  // Perform your validation logic
  // For example: Check if day, month, and year are within valid ranges
  return day > 0 && day <= 31 && month > 0 && month <= 12 && year > 0;
}
</script>

在isValidDate函数中，您可以根据您的需求添加更复杂的验证规则。