1

Necesito hacer que un input tenga ya por defecto las barras diagonales / para tipear la fecha de nacimiento en un formulario que el campo muestre //___ y al momento de escribir día mes y año salte entre ellos lo llegue a ver en una página de registro pero no recuerdo y me gustaría hacerlo de esa manera para ahorrar tiempo al momento de registrar datos y no usar un input tipo date ya que implicaría moverse en una cantidad de select en cambio preguntar fecha de nacimiento y tipearla es más práctico y accesible.

Lo intenté hacer con patter pero no logré hacer que se mostrara como lo expliqué. Bueno, espero se entienda lo que requiero y de ante mano gracias por la ayuda y los consejos que me puedan facilitar familia.

1

2 respuestas 2

2

Puedes usar un evento junto con una expresión regular de la siguiente manera.

<input name=x size=10 maxlength=10  onkeydown="this.value=this.value.replace(/^(\d\d)(\d)$/g,'$1/$2').replace(/^(\d\d\/\d\d)(\d+)$/g,'$1/$2').replace(/[^\d\/]/g,'')">

Otra opción es tener 3 inputs separados por / (bastante común) o utilizar algún date picker.

1

Podrías utilizar expresiones regulares para separar con / lo que vas escribiendo, el resultado tendrá el formato fecha:

function date(value) {
  if (value.match(/^\d{2}$/) !== null) {
    return value + '/';
  } else if (value.match(/^\d{2}\/\d{2}$/) !== null) {
    return value + '/';
  }
  return value;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date</title>
</head>
<body>
    <input name="date" type="text" placeholder="dd/mm/yyyy" onkeyup="this.value = date(this.value)" maxlength="10">
</body>
</html>

1
  • 1
    tambien se podria agregar un setTimeout para cuando el usuario borre la fecha se pueda quedar atascado porque se pone el "/"
    – LexxCh
    el 5 oct. 2022 a las 16:48

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.