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

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

Answer 2

I think this might work

    $(document).ready(function(){

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

})

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

Answer 3

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

Answer 4

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 5

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.