JQuery input mask for 12 hour time format

Question

I am using the jquery inputMask library(https://github.com/RobinHerbots/jquery.inputmask). But feel free to let me know if there is a better inputMask library. But I need inputMask, not a time picker.

The scenario is to have inputMask on the time field. We want to display and have inputMask based on user's locale so it should support both 12 hour and 24 hour format. Originally we only supported 24 hour format so the mask code looks like this:

$('input[id$="endTime"]').inputmask("hh:mm:ss", {placeholder: "HH:MM:SS", insertMode: false, showMaskOnHover: false});

Please be aware that we need to support seconds as well. For 12 hour format, I have actually tried several formats but none of them worked well for me. So is it possible to mask that?

Vuong · Accepted Answer · 2017-04-16T06:42:52.017

15

$('input[id$="endTime"]').inputmask("hh:mm:ss", {
        placeholder: "HH:MM:SS", 
        insertMode: false, 
        showMaskOnHover: false,
        hourFormat: 12
      }
   );

Demo

Tips: Open file jquery.inputmask.bundle.js, search datetime and review all options for it.

(Sorry, i can't add comment because i do not have enough limit point to do it.)

edited Apr 16 '17 at 06:42

answered Jan 07 '16 at 01:39

Vuong

617
11
26

Thank you Victor. It works pretty well. But my question is how can I have am/pm at the end of it? – Lance Shi Jan 07 '16 at 01:43
Edit placeholder property: `placeholder: "HH:MM:SS xm", ` – Vuong Jan 07 '16 at 01:59
This doesn't work... I tried to modify placeholder only and both placeholder and inputmask string, neither works well. – Lance Shi Jan 07 '16 at 02:29
1

I have figured out, I just need to set the mask as "h:s:s t\\m" and then it works quite well. – Lance Shi Jan 07 '16 at 02:44
adding the meridian doesn't seem to work. i tried the placeholder and mask listed above but no luck. does anyone have a working example that could post? – Anthony R Jan 16 '19 at 15:01
4

Figured it out in version 4.x it would be: `$('#endTime').inputmask({ alias: "datetime", placeholder: "12:00 AM", inputFormat: "hh:MM TT", insertMode: false, showMaskOnHover: false, hourFormat: 12 }` – Anthony R Jan 16 '19 at 15:27

score 0 · Answer 2 · answered Jan 11 '20 at 20:11

0

put "24" not 24

$('input[id$="endTime"]').inputmask("hh:mm:ss", {
    placeholder: "HH:MM:SS", 
    insertMode: false, 
    showMaskOnHover: false,
    hourFormat: "24"
  });

answered Jan 11 '20 at 20:11

hamidsolat

11
1

1

Not only is it already answered, but this contribution is incorrect. The question specifically asks for a **12** hour format with `a.m./p.m.`, not a 24 hour format. – Cindy Meister Jan 11 '20 at 21:12

JQuery input mask for 12 hour time format

2 Answers2