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?

Jovial

Answer 1

$('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.)

Bellew

Thank you Victor. It works pretty well. But my question is how can I have am/pm at the end of it? – Jovial

Edit placeholder property: placeholder: "HH:MM:SS xm", – Bellew

This doesn't work... I tried to modify placeholder only and both placeholder and inputmask string, neither works well. – Jovial

I have figured out, I just need to set the mask as "h:s:s t\\m" and then it works quite well. – Jovial

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? – Putupon

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 } – Putupon

Answer 2

put "24" not 24

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

Irizarry

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. – Icky