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. Its working good. But I also need to to put hh:mm in the textbox, to let 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

I think this might work

    $(document).ready(function(){

    $("#txtTime").setMask('time').val('hh:mm');

})

http://www.jsfiddle.net/9dgYN/1/

Answer 2

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.

Answer 3

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