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

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

Answer 2

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.

Answer 3

I think this might work

    $(document).ready(function(){

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

})

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

Answer 4

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 5

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");
        };
    }
});