En un input - Obligar q entren los datos hh:mm

[sergi_climent]

Hola,

lo dicho en el titulo, me gustaria obligar al usuario a entrar datos en este formato hh:mm, hay alguna manera de poner una mascara en el mismo input?
o tengo q comprovarlo en el onsubmit del form?

saludos y gracias!!!

[derkenuke]

Bueno, he visto tu post y he estado trabajando en un código, a ver si me salía. De momento sólo vale para HH:MM y no se puede modificar... pero mirare a ver si puedo hacer algo mejor:

Código PHP:

  <input type="text" id="caja" />

<script>

var laCaja=document.getElementById("caja");

function ponMascara(valueActual,mascaraTotal) {
    var mascara=mascaraTotal.substring( valueActual.length, mascaraTotal.length );
    laCaja.value=valueActual+mascara;
}

var valor="";
var mascaraDef="HH:MM";

laCaja.onkeypress=function(e){
    var code, targ;
    if (!e) var e = window.event; 
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    // Detecta o codigo da tecla
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
    var caracter = String.fromCharCode(code);
    //sólo dejamos colocar numeros en la caja
    if (code < 48 || code > 57)        //no es un número
        return false;
    if (code==8) {        //es el backspace
        //borramos un caracter de valor, y si hay un ":" borramos dos
        if(valor.length==3)        //hay colocado HH:
            valor=valor.substring(0,1);        //dejamos H
        else if(valor.length>0)    //si hay algo que borrar, lo borraremos
            valor=valor.substring(0,valor.length-1);
        ponMascara(valor,mascaraDef);
        return false;
    }
    else {
        if(valor.length==2)
            valor+=":";
        if(valor.length<mascaraDef.length)
            valor+=caracter;
        ponMascara(valor,mascaraDef);
        //y no escribimos nada en la caja
        return false;
    }
}

ponMascara("",mascaraDef);



</script>  
  

Un saludo.

[derkenuke]

Me he dedicado a escribirle un validador "al vuelo" para formato HH:MM 24h y he mejorado algo el código.

Está muy comentado para que todo el que se tome las molestias lo entienda fácilmente. Me gustaría que todo el que pueda lo ponga a prueba y comente sus sugerencias para mejorarlo:

Código PHP:

  <input type="text" id="caja" /> 
 
<script> 
 
var laCaja=document.getElementById("caja"); 
var valor=""; 
var mascaraDef="HH:MM"; 
 
 
// sustituirá la mascara en el campo por lo que se vaya escribiendo 
function ponMascara(valueActual,mascaraTotal) { 
    var mascara=mascaraTotal.substring( valueActual.length, mascaraTotal.length ); 
    laCaja.value=valueActual+mascara; 
} 
 
// devuelve true en caso de que el caracter sea válido en esa posición pos para un formato HH:MM 24h 
function esValidoHHMM(c,pos) { 
    if( pos==1 )                // primer caracter de las horas (entre 0 y 2) 
        return /^[0-2]$/.test(c); 
    else if( pos==2 )            // segundo caracter de las horas (depende del primero) 
        return /^([0-1][0-9])|(2[0-3])$/.test(valor+c); 
    else if( pos==3 || pos==4 )    // primer caracter de los minutos (entre 0 y 5) 
        return /^[0-5]$/.test(c); 
    else if( pos==5 )             // segundo caracter de los minutos (entre 0 y 9) 
        return /^[0-9]$/.test(c); 
    else                        // cualquier otro caso 
        return false; 
} 
 
// el evento de pulsación de tecla para la caja laCaja 
laCaja.onkeypress=function(e){ 
    var code; 
    if (!e) var e = window.event; 
    if (e.keyCode) code = e.keyCode;            // detectamos el codigo de la tecla 
    else if (e.which) code = e.which; 
    var caracter = String.fromCharCode(code);    // extraemos su caracter 
    if (code==8) {        //controlamos el caracter backspace para borrar números de la caja 
        // borramos un caracter de valor, y si hay un ":" borramos dos 
        if(valor.length==3)        //hay colocado HH: 
            valor=valor.substring(0,1);        //dejamos H 
        else if(valor.length>0)    //si hay algo que borrar, lo borraremos 
            valor=valor.substring(0,valor.length-1); 
        ponMascara(valor,mascaraDef); 
    } 
    else if( esValidoHHMM(caracter, valor.length+1) ) {        // si es un número válido en el contexto, lo añadiremos 
        if(valor.length==2) 
            valor+=":"; 
        if(valor.length<mascaraDef.length) 
            valor+=caracter; 
        ponMascara(valor,mascaraDef); 
    } 
    else  
        alert("El carácter escrito en el campo no es válido"); 
    return false;        //nunca aceptaremos que el evento continúe, controlaremos el value siempre nosotros 
} 
 
ponMascara("",mascaraDef); 
 
 
 
</script>  
  

Me ha acabado convenciendo mucho el script (salvo que se ve el cursor parpadear en la caja, y el individuo puede mosquearse un poco creyendo que va a escribir al final...).


Saludos.

[miglos]

Yo estoy trabajando en algo similar, tengo 4 <inputs>.
Dos para la fecha y hora de inicio y los dos restantes para la fecha y hora de fin.
Entre otras cosas valida la hora en formato hh:mm:ss y la fecha en formato dd/mm/aaaa.
Tome como referencia un tema de este mismo foro:

http://www.forosdelweb.com/showthrea...ar+campo+fecha

Lo que yo necesito es validar, en caso que ambas fechas sean iguales, la hora de fin no puede ser menor a la de inicio.

Para la fecha inicial, el campo es readonly, y a la hora de hacer la comparacion entre campos fecha, me pone que el input es undefined. Una vez que le quito el "readonly" si me permite hacer la comparación.

Lo que quiero es descartar esta duda, o en todo caso, como hacer para comparar el contenido de este campo.

Muchas gracias.

[sergi_climent]

Hola, probe tu codigo tal cual, (copy&paste) y me da el error es el siguiente en:

- Firefox: laCaja has no properties
- IE 7 : laCaja es 'nulo' o noes un objeto

EDITADO : ya logre q fucionara... despiste mio. disculpa!

pero si pongo las 12:12 y luego intento cambiarlo me salta siempre el alert("El carácter escrito en el campo no es válido");

demasiado temprano para ir provando codigos... no me fije q se controlava solo el backspace para borrar numeros (y eso q esta comentado)

me voy hacer un cafe a ver si me aclaro! jajaja!

para mi el codigo ya es correcto!

saludos y muchisimas gracias!