Custom Date Input Field Without Any Datepicker

I have been working on a form elements where I got an idea to implement a date field without any browser built in datepicker or any other supporting jquery library based datepicker

Solution 1:

I have done some changes on your HTML, same CSS and new JS code. Please refer :

HTML

<div class="custom-date-field">
    <p><label>DOB <span>Enter the date format DD/MM/YYYY</span></label>
        <input id="dateField" type="text" placeholder="__/__/____" >
    </p>
</div>

or

<div class="custom-date-field">
    <p><label>DOB <span>Enter the date</span></label>
        <input id="dateField" type="text" placeholder="DD/MM/YYYY" >
    </p>
</div>

CSS same as your's

JS

var el = document.getElementById("dateField");

el.onkeyup = function(evt) {
    if((evt.keyCode >= 48 && evt.keyCode <= 57) || (evt.keyCode >= 96 && 
evt.keyCode <= 105)) {
       evt = evt || window.event;

       var size = document.getElementById('dateField').value.length;

       if ((size == 2 && document.getElementById('dateField').value > 31)|| (size == 5 && Number(document.getElementById('dateField').value.split('/')[1]) > 12) || (size >= 10 && Number(document.getElementById('dateField').value.split('/')[2]) > 2017)) {
           alert('Invalid Date');
           document.getElementById('dateField').value = ''; 
           return;
       }

      if ((size == 2 && document.getElementById('dateField').value < 32)|| (size == 5 && Number(document.getElementById('dateField').value.split('/')[1]) < 13)) {
          document.getElementById('dateField').value += '/';        
      } 

    } else { 
        alert('Please enter valid date.')
        document.getElementById('dateField').value = '';
    }
}

you can check here Demo

I hope this will work for you. :)

Note : I have done some validation, if you don't want please ignore it.