validate datetime with javascript and regex

Question

I am trying to validate textbox with valid datetime format. I need to check 24 hours datetime format. So i input following text to my textbox 22.05.2013 11:23:22

But it still doesnt validate it correctly. I am totally new to regex. This is so far i have tried

$('#test1').blur(function(){
 var validTime = $(this).val().match(/^[0,1]?\d\/(([0-2]?\d)|([3][01]))\/((199\d)|([2-9]\d{3}))\s[0-2]?[0-9]:[0-5][0-9]?$/);
    debugger;
    if (!validTime) {
        $(this).val('').focus().css('background', '#fdd');
    } else {
        $(this).css('background', 'transparent');
    }
});

This is my fiddle

Where did you get the pattern form? Why is there [0,1]? that won't allow 22.05.2013. — putvande
– putvande, Commented Jan 7, 2014 at 13:22
@putvande From here stackoverflow.com/questions/16626942/… — James
– James, Commented Jan 7, 2014 at 13:24

Halcyon · Accepted Answer · 2015-05-26 11:33:23Z

17

It's very hard to validate a date with a regular expression. How do you validate 29th of February for instance? (it's hard!)

Instead I would you use the built-in Date object. It will always produce a valid date. If you do:

var date = new Date(2010, 1, 30); // 30 feb (doesn't exist!)
// Mar 02 2010

So you'll know it's invalid. You see it overflows to March, this works for all the parameters. If your seconds is >59 it will overflow to minutes etc.

Full solution:

var value = "22.05.2013 11:23:22";
// capture all the parts
var matches = value.match(/^(\d{2})\.(\d{2})\.(\d{4}) (\d{2}):(\d{2}):(\d{2})$/);
//alt:
// value.match(/^(\d{2}).(\d{2}).(\d{4}).(\d{2}).(\d{2}).(\d{2})$/);
// also matches 22/05/2013 11:23:22 and 22a0592013,11@23a22
if (matches === null) {
    // invalid
} else{
    // now lets check the date sanity
    var year = parseInt(matches[3], 10);
    var month = parseInt(matches[2], 10) - 1; // months are 0-11
    var day = parseInt(matches[1], 10);
    var hour = parseInt(matches[4], 10);
    var minute = parseInt(matches[5], 10);
    var second = parseInt(matches[6], 10);
    var date = new Date(year, month, day, hour, minute, second);
    if (date.getFullYear() !== year
      || date.getMonth() != month
      || date.getDate() !== day
      || date.getHours() !== hour
      || date.getMinutes() !== minute
      || date.getSeconds() !== second
    ) {
       // invalid
    } else {
       // valid
    }

}

JSFiddle: http://jsfiddle.net/Evaqk/117/

edited May 26, 2015 at 11:33

answered Jan 7, 2014 at 13:27

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

James Over a year ago

Can we also check on this date time format 22/05/2013 11:23:22? previously i used 22.05.2013 11:23:22. so if user enter / or . then both are valid

Halcyon Over a year ago

Sure. Change the regexp to /^(\d{2}).(\d{2}).(\d{4}).(\d{2}).(\d{2}).(\d{2})$/ to allow any kind of single-character delimiter. . = any character, whereas \. (escape+.) matches just the character ..

sinewave440hz Over a year ago

In my particular case I had to make the last 3 time characters (seconds) optional by using (.(\d{2}))? instead of the last .(\d{2}). I needed to match times such as both 11:23 and 11:23:55. Thanks for the head start!

Jacek Cichoń · Accepted Answer · 2015-01-08 00:20:09Z

2

Try something like this:

function checkDateTime(element){
  if (!Date.parse(element.value)){ 
     element.style.background = 'red'; 
     element.focus(); 
     return false; 
  } else { 
     element.style.background = 'white'; 
    return true; 
  }
}

function checkForm(form){
  return checkDateTime(form.mytxtfield01) && checkDateTime(form.mytxtfield02)
}

No regular expression; only the function Date.parse('...') is used.

answered Jan 8, 2015 at 0:20

Jacek Cichoń

211 bronze badge

Comments

gimg1 · Accepted Answer · 2014-01-07 13:25:43Z

0

You need to properly test the regular expression to make sure it matches the date format you want. This tool can help you debug the expression: http://regexpal.com/.

Alternatively since you are already using jQuery, you could try using a validation plugin such as http://formvalidator.net/.

answered Jan 7, 2014 at 13:25

gimg1

1,18711 silver badges26 bronze badges

2 Comments

Halcyon Over a year ago

Dates don't really follow a regular grammar, especially if you take leap years into account. Regular expressions are not the right tool for validating a date. Now a date-format, sure, but not the actual date.

gimg1 Over a year ago

I completely agree but if you check the OP's question: "I am trying to validate textbox with 'valid datetime format'"

Collectives™ on Stack Overflow

validate datetime with javascript and regex

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related