Date range

Asked

Viewed 835 times

1

I am using HTML 5 type date, for the user to provide a date.

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

There are two fields: Start date and End date, but the end date has to be no more than 29 days after the start date. That is, if personnel select the initial date of 07/23/2018, it has an interval of no more than 29 days after that date, to select the final date.

javascript html5

  • You can pick the initial date, which the user informed, sum 29 days and set as final date value. Try to do so?

  • But I do not want to set a final date, I want to prevent the person from selecting a date above the 29 days of the initial date, have as?

  • Yes, the logic is the same as I mentioned: just add 29 days to the start date with Javascript and define it as the end date, but your question is not clear. Please edit and add HTML.

  • I edited it, take a look now

  • So, with what I commented before you can do this. You can set the maximum date through the attribute max. Try it like this, I’ll make sure it works and it’s easy.

  • I leave the min blank and the max with 29?

  • No, stick to the terms: sum 29 days - including put as a link to where explains how to do.

Show 2 more comments

2 answers

3


An example of how it can be done...

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

Good afternoon friend :D

When you subtract a date from another you get one timestamp just convert it to the desired format follows practical example:

Explanation:

  1. First I get the inputs at the beginning of the page with the Document.getElementsByName as it returns me an array picked the first as the name of the search.

  2. Then comes the way check up on which in turn, obtains the values of each input and creates an instance of the object Date.

  3. Finally, I subtract one date from another and use the Math.abs for if the beginning is greater than the end it makes the difference negative for positive.

  4. Divide to 1000.0 to leave in the format of unixtimestamp

  5. And divide by 86400 to get the difference in days.

  6. Finally I check if the difference is greater than 29 if yes I display a 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>

There are libraries that facilitate working with Dates for example the Momentjs

  • 1

    Can I get the "name" I put in the input?

  • @Pribeiro I think that’s what I understood... I hope I helped! :)

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.