input time mask using jquery

Question

I am using meioMask – a jQuery mask plugin to put time mask in a textbox. Here is the JsFiddle. It's working well. But I also need to put hh:mm in the textbox, to let the user know what to enter in the textbox.

How to do this.

EDIT: I also need to put am/pm in the mask. and I need 12 hrs time format.

Answer 1

If you want it simple and clean here's a quick, but complete, demo (See: http://jsfiddle.net/bEJB2/ ) that includes a placeholder and a mask working together. It uses the jQuery Plugin jquery.maskedinput. The JavaScript is so clean and clear

<div class="time-container">
     <h1> Demo of Mask for 12 Hour AM/PM Input Field w/ Place Holder </h1>

    <input class="timepicker" type="text" size="10" placeholder="hh:mm PM" />
</div>
<script>
    $.mask.definitions['H'] = "[0-1]";
    $.mask.definitions['h'] = "[0-9]";
    $.mask.definitions['M'] = "[0-5]";
    $.mask.definitions['m'] = "[0-9]";
    $.mask.definitions['P'] = "[AaPp]";
    $.mask.definitions['p'] = "[Mm]";

    $(".timepicker").mask("Hh:Mm Pp");
</script>

I would echo what @YiJiang said about PolyFills and Modernizr for placeholder handling in non-HTML5 browsers as well.