máscara de tiempo de entrada usando jquery

Question

Estoy usando meioMask - un complemento de máscara jQuery para poner la máscara de tiempo en un cuadro de texto. Aquí está el JsFiddle. Está funcionando bien. Pero también necesito poner hh:mm en el cuadro de texto, para que el usuario sepa qué escribir en el cuadro de texto.

Cómo hacer esto.

EDIT: También necesito poner am/pm en la máscara. y necesito 12 horas de formato de tiempo.

Answer 1

Parece que debería ser capaz de configurar esto con el complemento.

Aquí hay un comienzo tal vez?

Si observa el código, creo que debería pasar setMask un objeto options. Parece que defaultValue es una opción posible.

Parece que el siguiente debería funcionar (pero no lo hace):

$("#txtTime").setMask({mask: "time", defaultValue:"hh:mm"}); 

Esto es lo que estaba viendo:

$.fn.extend({ 
     setMask : function(options){ 
      return $.mask.set(this, options); 
     }, 

Y

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

creo que esto podría funcionar

$(document).ready(function(){ 

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

}) 

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

Answer 3

Se puede utilizar el HTML 5 placeholder atributo para crear el texto del marcador, a continuación, utilizar jQuery para añadir soporte para los navegadores que lo soportan, y quitar una vez que el elemento input gana enfoque.

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

Ver: http://www.jsfiddle.net/9dgYN/2/. También debería considerar utilizar un script como Modernizr para agregar la detección de características para el atributo placeholder.

Answer 4

Si lo quiere simple y limpio aquí hay una demostración rápida pero completa (Ver: http://jsfiddle.net/bEJB2/) que incluye un placeholder y una máscara trabajando juntos. Utiliza el complemento jQuery jquery.maskedinput. El JavaScript está tan limpio y claro

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

Me remito a lo dicho acerca @YiJiang PolyFills and Modernizr para placeholder manejo en los navegadores no HTML5 también.

Answer 5

utilizando el complemento de entrada enmascarada jQuery.

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