0

Tengo un input de tipo fecha en el cual puedo colocar una fecha ya sea seleccionándola con el calendario que despliega el navegador, como también escribiéndolo directamente en el input. El tema que tengo es que quiero que no supere la fecha de la que se encuentra en la actualidad; pude solventarlo con javascript y eso en el panel de calendario que me despliega el navegador funciona correctamente, el tema es cuando escribo de forma manual en el input sí me permite ingresa fechas posteriores a la actual.

introducir la descripción de la imagen aquí

Aquí sí no me permite colocar fechas posteriores al día en que estamos: esto funciona con javascript

introducir la descripción de la imagen aquí

y aquí escribiendo de forma manual: aquí sí me acepta fechas posteriores. Lo que ando buscando es que escribiendo no me deje colocar fechas posteriores; tengo como una idea que en el atributo MAX del input ahí detecte la fecha actual y con ello no dejar que supere de esa fecha.

Este es mi código:

<div class="col-md-3 mb-2">
  <label>Fecha accidente *</label>
  <input type="date" class="form-control" id="fechaAccidente" max="fechaactual">
</div>

y en el lado de javascript tengo lo siguiente:

$("#fechaAccidente").click(function () {
    var today = new Date().toISOString().split("T")[0];
    $("#fechaAccidente").attr("max", today);
});
1
  • En el evento change puedes comprobar si lo que hay escrito es una fecha válida y si lo es que sea inferior a la fecha que tú quieres, si no ya tú decides qué hacer (marcar error, borrarla... ). El problema es que tal cual está tu pregunta no podemos ayudarte, por un lado porque no vemos qué código tienes con lo cual no sabemos qué puedes hacer realmente y por otro lado porque aquí no hacemos tutoriales ni trabajamos para ti. Primero inténtalo tu y luego podemos ayudarte con cualquier problema concreto. Para tutoriales tienes google y youtube, hoy en día ya hay guías para todo en este mundo
    – Benito-B
    Commented el 31 may. a las 16:26

2 respuestas 2

0

Digamos que existen 2 maneras de afrontar las validaciones, yo les llamaré la:

  1. Proactiva: Impide ingresar un valor no valido
  2. Reactiva: Alerta que el valor ingresado no es valido

El atributo max y min es para una validación reactiva. Hay muchas validaciones que por su naturaleza deben realizarse una vez se ha terminado de escribir, en general esto sucede cuando el elemento pierde el foco

Por otro lado, la validación de formulario en HTML, de forma predetermina se realiza cuando se envía el formulario. Ver el siguiente ejemplo:

<form>
  <input type="date" max="2024-05-10" value="2024-05-22">
  <input type="submit" value="Enviar">
</form>

Tú dices que quieres:

...no dejar que supere de esa fecha

Tú quieres hacer una validación proactiva, mi recomendación es que no sigas ese camino, siempre falla en algún caso, sobre todo porque este input permite escribe en el orden que tú quieras, no necesariamente de izquierda derecha lo que va a ocasionar un lio en la validación.

Valida luego que el elemento pierde el foco, para esto puedes usar reportValidity

Escribir una fecha no validad<br/>
<input type="date" max="2024-05-10" onblur="this.reportValidity()"><br/>
Hacer click en cualquier lado para que el inptut pierda el foco

También puedes con CSS y el pseudoselector :out-of-range y mostrar una advertencia visual de que el campo está mal, como un borde rojo

input:out-of-range {
  border: 2px solid red;
}
Escribir una fecha no validad<br/>
<input type="date" max="2024-05-10"><br/>
Hacer click en cualquier lado para que el inptut pierda el foco

O puedes combinar ambos métodos

1
  • ok perfecto, voy a probar como ocupar lo que me mencionas con mi codigo
    – Jona Dev
    Commented el 31 may. a las 20:58
-1

ok en si lo tengo es este imput en el html

<div class="col-md-3 mb-2">
  <label>Fecha accidente *</label>
  <input type="date" class="form-control" id="fechaAccidente" max="fechaactual">
</div>

y en el lado de javascript tengo lo siguiente:

$("#fechaAccidente").click(function () {
    var today = new Date().toISOString().split("T")[0];
    $("#fechaAccidente").attr("max", today);
});

como menciono en la pregrunta, cuando se despliega el calendario en el input de navegador de fecha si respeta el no poder agregar fechas posteriores, solo el tema es cuando lo escribo manual ahi si no me deja poner como limite de fecha la que estamos actualmente, intente poner el atributo de max para que solo llegue a ese rango, pero a lo que investigue o vi en internet es que pone una fecha fija, no se toma como tal la fecha actual

2
  • 1
    ¿Esto es una respuesta o una ampliación de tu pregunta? Si es lo segundo, debes editar tu pregunta en lugar de redactar una no-respuesta. Haz el recorrido de bienvenida para conocer el funcionamiento, y lee Cómo preguntar.
    – padaleiana
    Commented el 31 may. a las 18:37
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 31 may. a las 20:11

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.