HTML5 – Campo para agendar uma data a partir de um periodo

Neste posto vamos criar um campo data para informar para quando desejamos marcar um agendamento, como será uma data agendada não pode ser menor que a data atual.

Para isso vamos usar o elemento de  HTML <input type="date"> é uma versão específica do elemento <input> usado para criar um campo de entrada (input) aceitando a data.

Se desejarmos limitar um período de seleção no HTML5 podemos usar o atributo min e max para que o usuário não tenha como selecionar datas fora deste intervalo.

Mas neste exemplo vamos fazer com que o usuário só possa selecionar uma data para a partir de 5 dias, e caso esteja acessando por um browser que não possua recurso do HTML5 vamos apresentar um aviso dizendo a partir de qual data ele pode solicitar um agendamento.

Formulário contendo o campo e o aviso da data minima para agendamento

  <form>
    <div class="field small">
      <label>Data proposta *</label>
      <input type="date" name="data" id="dtAgenda" min="2017-04-01" required />
      <p><span style="color:#ff0000;"><small>Aten&ccedil;&atilde;o, Agendar para a partir de:</small></span></p><div id="divDtFutura"></div>
    </div>
  </form>

Lógica usada para adquirir a data atual realizar os tratamentos e inseri-la como mínima no elemento <input>  do formulário e da DIV usada para aviso.

 <script>
    //Fabiano Soares - 26/04/2017 - Só poderá agenda para a partir dos próximos 5 dias
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth() + 1; //Janeiro é 0, então somamos + 1 para trabalhar com calendário conhecido
    var yyyy = today.getFullYear();
    // Data de hoje mais 5 dias
    dd = dd + 5;
    //se for maior que dia 30 vai para o proximo mês
    if(dd > 30){
      dd = dd - 30;
      mm = mm+1;
    }
    //se for maior que 12 vai para o proximo ano
    if(mm > 12){
      mm = 1;
      yyyy = yyyy + 1;
    }
    // Se for menor que 10 formatamos com um zero na frente Ex: de 9 para 09
    if(dd < 10){
      dd = '0' + dd;
    }
    // Se for menor que 10 formatamos com um zero na frente Ex: de 9 para 09
    if(mm < 10){
      mm = '0' + mm;
    }
    today = yyyy + '-' + mm + '-' + dd;
    document.getElementById("dtAgenda").setAttribute("min", today);
    today = dd + '/' + mm + '/' + yyyy;
    var div = document.getElementById("divDtFutura");
    div.innerText =  today ;
  </script>

Veja como fica o resultado: