Date input type validation in javascript?

Question

I can't quite figure out how to validate a date input type in javascript. I tried looking on the internet but I just couldnt find anything.

I have one field that ask the user to input its birthday. I want to validate it in javascript with the certain limits on days months and, especially years. For example if the user input more than 2016(or the current year) it would give an error. I can't quite figure out how to "extract" the date input type and control every elements of it (day, month, year).

Here part of my 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;

This is all i've got.. please help?

Answer 1

TLDR

You have to parse the string as a date (JavaScript provides the Date API for this very use case).

Full answer

You're on the right track. Here's a JSBin example I did. Try opening the console and changing the date, and you'll see it logged.

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

(I'm using jQuery in the above example just for convenience sake, but you can use whatever you want.)

The problem you have here is that the date is logged as a string. You can use the JavaScript Date object to parse the string.

Based on whatever validation you want to do, you can use various date object methods (like getFullYear, for example) and match those against the input.

I'll leave the full implementation up to you, but the inside of the change handler might look like:

var date = new Date(this.value);

if(date.getFullYear() > 2016) {
  // do something (like show a message, for example)
}

Answer 2

If you are able to get the value of the input element with:

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

Then birthday will be available to you as a string (all input values are always returned to JavaScript as strings). From there, you'd need to convert that string to a date with:

 var dob = Date.parse(birthday);

Then, once you've got the entire date, you can extract the pieces of it with the various JavaScript Date/Time methods:

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

Here's a working example:

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>

NOTE: Keep in mind that Daylight Savings Time will have an effect on the result depending on what time of day it is. See: How to check if the DST (Daylight Saving Time) is in effect and if it is what's the offset? for more info. on that.

Answer 3

Input type date is not supported in all browsers, so you should detect that and replace the input with a suitable alternative that includes the format that is required.

Where supported, the input will return an ISO 8601 format date string without a time zone. According to ISO 8601, this should be treated as local, but TC39 in their wisdom decided that it should be treated as UTC, so that is what Date.parse (and the Date constructor) will do in most cases. In some it will be treated as local and in IE 8 as invalid. So for systems with a timezone that is west of Greenwich, Date.parse('2016-03-20') will return a Date object that, when displayed as a local date, will be '2016-03-19', i.e. one day early.

So you should manually parse the date string, validate the date using one of the many answers here, then check whether the year, month and day are within your constraints.

Answer 4

if you're simply trying to validate whether or not a string is a valid date, you can just check that it creates a valid date object.

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

https://jsfiddle.net/46cztok6/

---

so your validate() function would look like this.

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

Answer 5

Here is a bin so you can have an idea how to start validating this type of field: 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')
  }
});

Answer 6

After looking out for 3 hours, i wrote this and achieved dd/mm/yyyy date input using plain Javascript.

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