JQuery input mask for 12 hour time format

Lance Shi picture Lance Shi · Jan 7, 2016 · Viewed 29.6k times · Source

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?

Answer

Vuong picture Vuong · Jan 7, 2016
$('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.)