input time mask using jquery
I am using meioMask – a jQuery mask plugin to put time mask开发者_StackOverflow 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.
It looks like you should be able to set this with the plugin.
Here's a start maybe?
If you look in the code, I think you should be passing setMask
an options
object. It looks like defaultValue
is a possible option.
It looks like the following should work (but it doesn't):
$("#txtTime").setMask({mask: "time", defaultValue:"hh:mm"});
This is what I was looking at:
$.fn.extend({
setMask : function(options){
return $.mask.set(this, options);
},
And
// default settings for the plugin
options : {
attr: 'alt', // an attr to look for the mask name or the mask itself
mask: null, // the mask to be used on the input
type: 'fixed', // the mask of this mask
maxLength: -1, // the maxLength of the mask
defaultValue: '', // the default value for this input
using jQuery Masked Input Plugin.
$.mask.definitions['H'] = "[0-2]";
$.mask.definitions['h'] = "[0-9]";
$.mask.definitions['M'] = "[0-5]";
$.mask.definitions['m'] = "[0-9]";
$(".timepicker").mask("Hh:Mm", {
completed: function() {
var currentMask = $(this).mask();
if (isNaN(parseInt(currentMask))) {
$(this).val("");
} else if (parseInt(currentMask) > 2359) {
$(this).val("23:59");
};
}
});
I think this might work
$(document).ready(function(){
$("#txtTime").setMask('time').val('hh:mm');
})
http://www.jsfiddle.net/9dgYN/1/
You can use the HTML5 placeholder
attribute to create the placeholder text, then use jQuery to add support for browsers that do not support it, and remove it once the input
element gains focus.
var timeTxt = $("#txtTime").setMask('time');
var placeholder = timeTxt.attr('placeholder');
timeTxt.val(placeholder).focus(function(){
if(this.value === placeholder){
this.value = '';
}
}).blur(function(){
if(!this.value){
this.value = placeholder;
}
});
See: http://www.jsfiddle.net/9dgYN/2/. You should also consider using a script such as Modernizr to add feature detection for the placeholder
attribute.
精彩评论