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