TLDR

你必须将字符串解析为日期（JavaScript 为这个用例提供了Date API）。

完整答案

你走在正确的轨道上。这是我做的一个JSBin示例。尝试打开控制台并更改日期，您将看到它已记录。

$('#birthday').on('change', function() {
   console.log(new Date(this.value));
});

（为了方便起见，我在上面的示例中使用 jQuery，但您可以使用任何您想要的内容。

您在这里遇到的问题是日期记录为字符串。您可以使用 JavaScript Date 对象来解析字符串。

根据要执行的任何验证，可以使用各种日期对象方法（例如 getFullYear），并将这些方法与输入进行匹配。

我将把完整的实现留给你，但change处理程序的内部可能如下所示：

var date = new Date(this.value);
if(date.getFullYear() > 2016) {
  // do something (like show a message, for example)
}

如果您只是尝试验证字符串是否为有效日期，则可以检查它是否创建了有效的日期对象。

function isValidDate(d){
    return !isNaN((new Date(d)).getTime());
}

https://jsfiddle.net/46cztok6/

所以你的validate()函数看起来像这样。

function validate(){
    var birthday = document.getElementById('bday').value;
    if(!isValidDate(birthday)){
        alert("you did not enter a valid birthday");
        return false;
    } 
}

如果您能够通过以下方式获取输入元素的值：

 var birthday = document.getElementById('bday').value;

然后birthday将作为字符串提供给您（所有输入值始终作为字符串返回给 JavaScript）。 从那里，您需要将该字符串转换为日期：

 var dob = Date.parse(birthday);

然后，一旦你得到了整个日期，你可以使用各种JavaScript Date/Time方法提取它的片段：

 var month = dob.getMonth(); // months start counting from zero!
 var day   = dob.getDate();
 var year  = dob.getFullYear();  // getYear() provides 3 digit year!

下面是一个工作示例：

var birthday = null, btn = null, output = null;
// Wait until the document is ready for interaction:
window.addEventListener("DOMContentLoaded", function(){
     // Get references to DOM elements needed:
     birthday = document.getElementById('bDate');
     btn = document.getElementById('btnGetDate');
     output = document.getElementById('result');
     // Set up an event callback for when the button gets clicked:      
     btn.addEventListener("click", function(){
       
        // Create a new Date that converts the input date
        var dob =new Date(birthday.value);
        alert(dob);
        // Extract pieces of the date:
        var month = dob.getMonth(); // months start counting from zero!
        var day   = dob.getDate();  
        var year  = dob.getFullYear();
        // Now that you have the pieces of the date, you can validate as you wish:
        // e.g. if(year > 2016) { . . . }
  
        // Write out date:
        output.innerHTML = ++month + "/" + ++day + "/" + year; 
     });
  
});

  

<input type="date" id="bDate">
<input type="button" id="btnGetDate" value="Get Date">
<p id="result"></p>

注意：请记住，夏令时将影响 结果取决于一天中的什么时间。看： 如何检查 DST（夏令时）是否有效，如果有效，偏移量是多少？ 了解更多信息。关于这一点。

并非所有浏览器都支持输入类型 date，因此您应该检测到这一点，并将输入替换为包含所需格式的合适替代方法。

如果支持，输入将返回不带时区的 ISO 8601 格式日期字符串。根据 ISO 8601，这应该被视为本地，但 TC39 明智地决定将其视为 UTC，因此在大多数情况下，Date.parse（和 Date 构造函数）都会这样做。在某些版本中，它将被视为本地，而在IE 8中被视为无效。因此，对于时区位于格林威治以西的系统，Date.parse('2016-03-20')将返回一个 Date 对象，当该对象显示为本地日期时，该对象将为"2016-03-19"，即提前一天。

因此，您应该手动解析日期字符串，使用此处的众多答案之一验证日期，然后检查年、月和日是否在您的约束范围内。

这里有一个垃圾箱，所以你可以知道如何开始验证这种类型的字段： https://jsbin.com/lifacaxonu/edit?html,js,console,output

$('#birthday').on('change', function() {
  var val = this.value.split('-');
  if (val[0] > new Date().getFullYear()) {
    console.log('invalid')
  } else {
    console.log('ok')
  }
});

在查找了 3 个小时后，我写了这篇文章，并使用普通的 Javascript 实现了 dd/mm/yyyy 日期输入。

<div class="container">
        <div class="datetime-container">
            
            <input type="text" placeholder="write your date" id="datetime" onblur="validateDate()">
            <p id="error"></p><br>
            <input type="tel" maxlength="10" placeholder="dd/mm/yyyy"
    oninput="this.value = DDMMYYYY(this.value, event)" />     
        </div>
    </div>
    <script>
        function DDMMYYYY(value, event) {
          let newValue = value.replace(/[^0-9]/g, '').replace(/('..*)'./g, '$1');
        
          const dayOrMonth = (index) => index % 2 === 1 && index < 4;
        
          // on delete key.  
          if (!event.data) {
            return value;
          }
          let currentYear = new Date().getFullYear();
          console.log(newValue.slice(2,4));
          if(newValue.length>=2 && newValue.slice(0,2)>31){
              tempValue = newValue;
              newValue = tempValue.replace(tempValue.slice(0,2),31);
              
            document.getElementById("error").style.display = "initial";
            document.getElementById("error").innerHTML = "Invalid day!";
          }else if(newValue.length>=4 &&newValue.slice(2,4)>12){
            document.getElementById("error").style.display = "initial";
            document.getElementById("error").innerHTML = "Invalid month!";
            tempValue = newValue;
            newValue = tempValue.replace(tempValue.slice(2,4),12);
          }else if(newValue.length==8 && newValue.slice(4)>currentYear){
            tempValue = newValue;
            newValue = tempValue.replace(tempValue.slice(4),currentYear);
            document.getElementById("error").style.display = "initial";
            document.getElementById("error").innerHTML = "Invalid year!";
          }
          else{
            document.getElementById("error").style.display="none";
          }
          return newValue.split('').map((v, i) => dayOrMonth(i) ? v + '/' : v).join('');;
        }
        </script>

var dob=new Date(birthdate.value);
var month,day,year;
month=dob.getMonth();
day=dob.getDate();
year=dob.getFullYear();
if(birthdate.value == ""){
    alert("Birth Date is Required");
}
if(year > 2023 && month >= 2){
    alert("Birth Date is Invalid");
}