TLDR

Question

我无法弄清楚如何在javascript中验证日期输入类型。我试着在网上看，但我找不到任何东西。

我有一个字段要求用户输入其生日。我希望在javascript中验证它，并在几天，特别是几年内具有一定的限制。例如，如果用户输入超过2016（或当前年份），则会出错。我无法弄清楚如何提取＆＃34;日期输入类型并控制它的每个元素（日，月，年）。

这是我的html的一部分

<form method="POST" action="request.jsp" onsubmit="return validate()">
Date of birth: <input type="date" id="bday" name="bday" value="">
</form>

使用Javascript：

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

这就是我所有的......请帮忙吗？

Answer 1

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)
}

Answer 2

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

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

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

 var dob = Date.parse(birthday);

然后，一旦你有了整个日期，你可以使用各种JavaScript日期/时间方法提取它的部分：

 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>

注意：请记住，夏令时会产生影响结果取决于它是什么时间。看到： How to check if the DST (Daylight Saving Time) is in effect and if it is what's the offset? 了解更多信息。在那。

Answer 3

所有浏览器都不支持输入类型日期，因此您应检测到该输入并使用包含所需格式的合适替代方案替换输入。

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

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

Answer 4

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

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;
    } 
}

Answer 5

这里是一个垃圾箱，因此您可以了解如何开始验证这种类型的字段：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')
  }
});

javascript中的日期输入类型验证？

5 个答案:

TLDR

完整答案