Regex for AM PM time format for jquery

Question

I am being frustrated by a regular expression to mask the input field. I want to Limit input to hh:mm AM|PM format and I can't get this regex to work.

I use this regex in conjunction with a jquery tool from www.ThimbleOpenSource.com. It was the filter_input.js tool or whatever.

It seems to work for a simple regular expression but the one I came up with doesn't seem to work. This is my jsFiddle test link below.

jsFiddle

The regex you have in your fiddle is just `[a-z]`... do you expect that to be the correct filter? Have you tried googling regexes for time formats? — ean5533, Jan 11 '12 at 13:52
The question is what you want. This filter_input plugin seems to check the input for every keystroke. But then you can't check a timeformat. If you want to check the timeformat as described you should check the value of input fields on blur or on submit of the form (for example). — Armin, Jan 11 '12 at 13:57
If you right a regexp like /[0-2][0-9]:[0-1][0-9] AM|PM/, when user will write something into the input box the script will try to match his first keyboard input with the whole regexp. So if you write as first keyboard input "2" the script will try to match "2" with /[0-2][0-9]:[0-1][0-9] AM|PM/ and it's not correct. The filter_input can only work with simple regex. — Kakawait, Jan 11 '12 at 14:00
sorry... This was the original regex I had... I was doing that to see if that thing was working http://jsfiddle.net/KsvdK/6/ — SoftwareSavant, Jan 11 '12 at 14:18

score 29 · Accepted Answer · answered Jan 11 '12 at 14:03

I have made a jsfiddle example, based on the regular expression of the answer von Yuri: http://jsfiddle.net/Evaqk/

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

score 2 · Answer 2 · answered Jan 11 '12 at 13:56

2

First of all, if you using it for input field, you should never let users input date or time information using text fields and hoping it will be in strict format.

But, if you insist:

/^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/

This regex will validate time in AM/PM format.

answered Jan 11 '12 at 13:56

YuS

2,025
1
15
24

This doesn't appear to work with the jsFiddle Function that I have – SoftwareSavant Jan 11 '12 at 14:38
Well, as it was written in comment by @Kakawait, as it runs on keypress, it can be used only to avoid invalid chars in the field, not for valid format. With your function you can only specify the chars: `[0-9:APM ]` – YuS Jan 11 '12 at 14:47

noob · Answer 3 · 2012-01-14T15:47:38.130

2

You can't do that with that plugin because here you need to check each character.

HTML:

<form>
    <p>When?</p>
        <input type="text" id="test1" placeholder="hh:mm(AM|PM)"/>
</form>

JavaScript:

$("#test1").keypress(function(e) {
    var regex = ["[0-2]",
    "[0-4]",
    ":",
    "[0-6]",
    "[0-9]",
    "(A|P)",
    "M"],
    string = $(this).val() + String.fromCharCode(e.which),
    b = true;
    for (var i = 0; i < string.length; i++) {
        if (!new RegExp("^" + regex[i] + "$").test(string[i])) {
            b = false;
        }
    }
    return b;
});

Example

edited Jan 14 '12 at 15:47

answered Jan 11 '12 at 14:27

noob

8,982
4
37
65

Hey, we should turn that into a simpleMaskPluggin! – SoftwareSavant Jan 11 '12 at 18:15

score 1 · Answer 4 · answered Oct 18 '14 at 21:36

1

So I'm pretty sure this is solved by now, but I was recently struggling with this and couldn't find an answer fast enough. I'm using Bootstrap Validator (bootstrapvalidator.com by @nghuuphuoc) in conjunction with Eonasdan's DateTimepicker to validate an hour (PS: You can disable the date in Eonasdan's plugin).

Since Bootstrap Validator doesn't yet have a validator for time, you have to use a Regex. This one worked perfectly for me:

^([0-1]?[0-9]|2[0-3]):[0-5][0-9] [APap][mM]$

answered Oct 18 '14 at 21:36

anngelfra

21
2

If you're going to require AM or PM then it doesn't make sense to allow hour > 12. – chad Apr 27 '15 at 19:10
You should limit hours above 12, then the regex would be something like: `(0?[1-9]|1[0-2]):[0-5][0-9] ?[APap][mM]$` – lucasarruda Jun 08 '16 at 00:47

score 0 · Answer 5 · answered Mar 13 '17 at 08:39

0

the follwing function return (true/false) value

    function CheckTime(HtmlInputElement) {
       var dt = HtmlInputElement.value;
       return (/(0?[1-9]|1[0-2]):[0-5][0-9] ?[APap][mM]$/.test(dt));
}

answered Mar 13 '17 at 08:39

Malek Tubaisaht

1,170
14
16

score 0 · Answer 6 · answered Mar 18 '17 at 07:07

Check this solution too.

<!DOCTYPE html>
<html>
<body>

<p>This demo used to validate time with 12 hours format</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var regexp = /^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/;
    var res = regexp.test('12:00 AM'); //try with alphabets or wrong format
    document.getElementById("demo").innerHTML = res;
}
</script>

</body>
</html>

Regex for AM PM time format for jquery

6 Answers6

Linked