Validating Date in YYYY-MM-DD HH:MM format inside textbox ontype

Question

I want to validate a textbox which needs to accept ony in the format Date in YYYY-MM-DD HH:MM using

<!DOCTYPE html>
<html>
<body>

<form action="/action_page_post.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

<p>If you click submit, without filling out the text field,
your browser will display an error message.</p>

</body>
</html>

It should turn red or glow if something is other than said format.

this link help visit : http://jsfiddle.net/jquerybyexample/EywSP/ — Dipnesh Parakhiya, Mar 28 '17 at 05:51
No, compatibility issues for sake, I do not want date-time picker see here - http://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format — Code Guy, Mar 28 '17 at 05:56

mplungjan · Accepted Answer · 2017-03-28T06:27:06.123

4

This will test

pattern
valid date

function isValid(str) {
  var isPattern = /^20[1-9][0-9]-[0-1][0-2]-[0-3][0-9] [0-2][0-4]:[0-5][0-9]$/.test(str);
  if (!isPattern) return false;
  var d = new Date(str);
  return (!isNaN(d));
}
window.onload=function() {
  document.querySelector("input[name=date]").onkeyup=function() {
    var val = this.value;
    this.className = isValid(val)?"":"glow"
  }
}

.glow { background-color:pink }

<form>
<input type="text" name="date" required>
  <input type="submit" value="Submit">
</form>

edited Mar 28 '17 at 06:27

answered Mar 28 '17 at 06:15

mplungjan

169,008
28
173
236

Works perfectly! Nice – Code Guy Mar 28 '17 at 06:59
You want brackets around the time? – mplungjan Apr 02 '17 at 14:38
So what do you mean by your connnent? – mplungjan Apr 02 '17 at 15:22

score 1 · Answer 2 · edited May 23 '17 at 12:25

How about just masking it?

JSfiddle

Array.prototype.forEach.call(document.body.querySelectorAll("*[data-mask]"), applyDataMask);

function applyDataMask(field) {
    var mask = field.dataset.mask.split('');
    
    // For now, this just strips everything that's not a number
    function stripMask(maskedData) {
        function isDigit(char) {
            return /\d/.test(char);
        }
        return maskedData.split('').filter(isDigit);
    }
    
    // Replace `_` characters with characters from `data`
    function applyMask(data) {
        return mask.map(function(char) {
            if (char != '_') return char;
            if (data.length == 0) return char;
            return data.shift();
        }).join('')
    }
    
    function reapplyMask(data) {
        return applyMask(stripMask(data));
    }
    
    function changed() {   
        var oldStart = field.selectionStart;
        var oldEnd = field.selectionEnd;
        
        field.value = reapplyMask(field.value);
        
        field.selectionStart = oldStart;
        field.selectionEnd = oldEnd;
    }
    
    field.addEventListener('click', changed)
    field.addEventListener('keyup', changed)
}

ISO Date: <input type="text" value="" data-mask="____-__-__  __:__"/>

Source

Validating Date in YYYY-MM-DD HH:MM format inside textbox ontype

2 Answers2