3

Estoy haciendo un formulario utilizando javascript, en el formulario utilizo un input de tipo date y me gustaría aprender una manera de poder limitar a 4 dígitos el año del input, ya que si agrego más de 4 dígitos el año que obtengo de dicho input se altera, por así decirlo.

Por ejemplo, si la fecha es 01/04/2019

Al hacer un console.log(), me devuelve: 2019-04-01.

Pero a la hora de colocar 01/04/201952, me devuelve: 201952-04-01 y ya la fecha no es la que deseo, si no es un error.

¿Existe alguna manera de limitar los dígitos de la fecha?

  • Código:

$(".formulario").change(function (){
    
    var fecha = $("#fecha").val();

    console.log('\n');
    
    console.log(fecha);

    console.log('\n');
    

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>

   <label for="fecha">Fecha</label>
   <input type="date" name="fecha" id="fecha" class="formulario">

</form>

2
  • No te sirve utilizar un condicional? (year >= 1500 && year < 9999), en teoria como el año es un numero, el ejemplo que diste siempre sera correcto tengo entendido =/ el 17 oct. 2019 a las 16:43
  • @PauloUrbanoRivera lo intente pero no funciona, ya que si coloco un año con 6 dígitos, por ejemplo, 202000 a la hora de obtener el mes y día, me afecta estos valores también, ya que obtendría 0 y el año si tomaría 2020 el 17 oct. 2019 a las 16:48

2 respuestas 2

2

Se me ocurre que lo hagas del siguiente modo

  • Con los atributos min y max estableces los rangos de fechas que aparecerán disponibles en el calendario para que el usuario pueda elegir
  • Como el value de la fecha elegida es un string entonces podemos con split convertirlo a un vector y leer el valor del índice 0 que sería el año
  • Capturamos lo que el usuario eliga del calendario en el evento change
  • Evaluamos en un condicional si el año de la posición 0 del vector es mayor por ejemplo a 2021 solo como ejemplo y en concecuencia dejamos que el valor asignado al calendario sea la leyenda de que aparece por default

Código

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
    </head>
    <body>
    <input id="fechita" type="date" min="1970-12-31" max="2022-12-31">
    <script>
      let cajaFecha = document.getElementById("fechita")
      cajaFecha.addEventListener("change", () => {
           let fecha = document.getElementById("fechita")
           let transformada = fecha.value.split("-")
           console.log(transformada[0])
          
           if(transformada[0]>= "2021") {
             fecha.value = ""
           }
      })
    </script>
    </body>
    </html>

2
  • +1, muchas gracias! el 17 oct. 2019 a las 18:11
  • @Alvarez el comportamiento de la respuesta es algo extraña, si colocas un año mayor a 2021 se elimina todo lo que hay en el input, ¿seguro que es lo que estas buscando? el 17 oct. 2019 a las 18:13
1

puedes intentar usando los atributos min y max para limitar a 4 digitos, por ejemplo:

<input type="date" name="input" min='1900-01-01' max='9999-12-31' title="Por favor ingresa una fecha entre 1900-01-01 y 9999-12-31" required/>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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