1

Estou usando o type date do HTML 5, para o usuário fornecer uma data.

<input type="date" name="data-inicial">
<input type="date" name="data-final">

Existem dois campos: Data inicial e Data final, porém a data final tem que ser no máximo 29 dias após a data inicial. Ou seja, se a pessoal selecionar a data inicial de 23/07/2018, ela tem um intervalo de no máximo 29 dias após essa data, para selecionar a data final.

7
  • Você pode pegar a data inicial, que o usuário informou, somar 29 dias e definir como valor da data final. Quer tentar fazer assim?
    – Woss
    23/07/2018 às 16:39
  • Mas eu nao quero definir uma data final, eu quero impedir que a pessoa selecione uma data acima dos 29 dias da data inicial, tem como?
    – P Ribeiro
    23/07/2018 às 16:59
  • Tem, a lógica é a mesma que citei: basta somar 29 dias à data inicial com JavaScript e definí-la como data final, mas sua pergunta não está clara. Por favor, edite-a e adicione o HTML.
    – Woss
    23/07/2018 às 17:00
  • Editei, dá uma olhada agora
    – P Ribeiro
    23/07/2018 às 17:05
  • Então, com o que eu comentei antes você consegue fazer isso. Você pode definir a data máxima através do atributo max. Tente fazer assim, te dou certeza que funciona e é fácil.
    – Woss
    23/07/2018 às 17:19

2 Respostas 2

3

Um exemplo de como pode ser feito...

HTML5

<input type='date' id='d1' name='d1' min="">
<input type='date' id='d2' name='d2' min="">

JS (JQuery)

<script>
  $(document).ready(function() {
      $("#d1").change(function () {
        var split = $("#d1").val().split('-');
        var fim = new Date(parseInt(split[0]), parseInt(split[1]), parseInt(split[2]) + 29);
        $("#d2").attr({
           "min" : [fim.getFullYear(), 
                (fim.getMonth() > 9 ? '' : '0') + fim.getMonth(), 
                (fim.getDate() > 9 ? '' : '0') + fim.getDate()]
                .join('-')
        });
      });
  });
</script>
0

Boa tarde amigo :D

Quando você subtrai uma data de outra você obtêm um timestamp basta converte-lo para o formato desejado segue exemplo pratico:

Explicação:

  1. Primeiro obtenho os inputs no inicio da pagina com o document.getElementsByName como ele me retorna um array pego o primeiro como o nome da busca.

  2. Logo vem o metodo checar que por sua vez, obtêm os valores de cada input e crio uma instancia do objeto Date.

  3. Por fim realizo a subtração de uma data pela outra e utilizo o Math.abs para caso o inicio seja maior que o fim ele torna a diferença negativa para positiva.

  4. Divido para 1000.0 para deixar no formato de unixtimestamp

  5. E divido por 86400 para obter a diferença em dias.

  6. Por fim verifico se a diferença é maior que 29 caso sim exibo um alert().

const dataInicial = document.getElementsByName('data-inicial')[0];
const dataFinal = document.getElementsByName('data-final')[0];

function checar() {
  const inicio = new Date(dataInicial.value);
  const fim = new Date(dataFinal.value);
  
  const diferenca = Math.abs(inicio - fim) / 1000.0;
  const diferencaEmDias = diferenca/86400;

  //
  // Tabela timestamp
  //
  /*    1 Hr      |    3600 Seg        */
  /*    1 Dia     |    86400 Seg       */
  /*    1 Semana  |    604800 Seg      */
  /*    1 Mes     |    2629743 Seg     */
  /*    1 Ano     |    31556926 Seg    */


  console.log(`${diferencaEmDias} dias de diferença`);
  
  if (diferencaEmDias > 29) {
    alert('Maior que o limite');
  }
}
<input type="date" name="data-inicial">
<input type="date" name="data-final">
<button onclick="checar()">DIFERENÇA</button>

Existem bibliotecas que facilitam o trabalho com Datas por exemplo o MomentJs

2
  • 1
    Tem como eu pegar o "name" que coloquei no input?
    – P Ribeiro
    23/07/2018 às 17:06
  • @PRibeiro Acho que foi oque entendi... Espero ter ajudado! :) 23/07/2018 às 17:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .