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. I want to achieve simple datepicker where it will be user-friendly for everyone.

I have an idea of 2 different styles and trying to achieve this but not getting exactly as I want. Maybe I have to write some jQuery or so but not sure what to write.

What do I want? In the above image, it shows the input field with placeholders DD/MM/YYYY in first where when someone enters He should be to enter the date format in the above style and the forward slash which is a date separator should stay intact.

(Another Advanced Idea) If possible we can set a range limit for the field for DD only 1-31 can be entered and MM only 1 to 12 and in YYYY 0 to current year.

.custom-date-field {
  font-family: Arial, Sans-serif;
  border: 1px solid #dddddd;
  padding: 20px;
  font-size: 12px;
  margin-bottom: 30px;
}

.custom-date-field input {
  background-color:#e4ebef;
  border: none;
  padding: 5px 10px;
 }

.custom-date-field span {
  display: block;
  font-size: 12px;
}

.custom-date-field label {
  width: 30%;
  display: inline-block;
  float: left;
  font-size: 18px;
}

<div class="custom-date-field">
<p><label>DOB <span>Enter the description</span></label>
<input type="number" placeholder="DD/MM/YYYY" value="" />
</p>
</div>

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

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

<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

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.

来源：https://stackoverflow.com/questions/43471095/custom-date-input-field-without-any-datepicker

标签

html5

date

input

placeholder