2

Como puedo bloquear fechas anteriores en un input type date

2
  • ¿puedes explicar un poco mas?, no se entiende bien que intentas lograr. el 1 ago. 2016 a las 18:05
  • en un formulario de reservas, necesito desactivar las fechas pasadas. que solo se pueda seleccionar la fecha desde hoy hacia adelante.
    – Raul
    el 1 ago. 2016 a las 18:50

4 respuestas 4

7

Utiliza el atributo min:

<input type="date" min="2016-01-01">

Aquí tienes algo de documentación: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

5

En HTML5 existe el atributo min, desafortunadamente HTML5 no tiene ninguna forma de sacar la fecha actual para poderla poner como value de un atributo.

Posibles soluciones:

PHP:

<input type="date" name="fecha" id="fecha" placeholder="Introduce una fecha" required min=<?php $hoy=date("Y-m-d"); echo $hoy;?> />

Javascript:

document.getElementById('#fecha').value = new Date().toDateInputValue();

Javascript con ayuda de jQuery:

 $(document).ready( function() {
    $('#fecha').val(new Date().toDateInputValue());
});​
1

Si lo quieres validar del lado del servidor (PHP) utiliza lo siguiente:

    $fechaEntrada = '2016-07-22';
    $fechaLimite = '2016-08-01';
//si la fecha enviada del form es menor a la que deseas validar
        if( strtotime($fecha_entrada) < strtotime($fecha_limite) ) {
        //la fecha es menor
        }else{
        //la operación fue realizada en un periodo válido
        }

Para validarlo en JS puedes hacer lo siguiente:

var fechaEntrada = '2016-07-22';
var fechaLimite = '2016-08-01';
if( (new Date(fechaEntrada).getTime() < new Date(fechaLimite).getTime()))
{
   //alert('la fecha es menor'); 
    //return false;
}else{
 //return true;
}
0

Tuve la misma duda, pero utilizando java script puedes resolverlo de mandera sencilla

Primero recuerda que debes tener habilitado el atributo min en tu input

<input type="date" id="fechaReserva" min="2017-01-01" />

Luego utiliza esta funcion reemplazando obiamente los id

    var fecha = new Date();
    var anio = fecha.getFullYear();
    var dia = fecha.getDate();
    var _mes = fecha.getMonth();//viene con valores de 0 al 11
    _mes = _mes + 1;//ahora lo tienes de 1 al 12
    if (_mes < 10)//ahora le agregas un 0 para el formato date
    { var mes = "0" + _mes;}
    else
    { var mes = _mes.toString;}
    document.getElementById("fechaReserva").min = anio+'-'+mes+'-'+dia; 

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.