Only allow to select two days ahead

Asked

Viewed 65 times

1

I would like a javascript function that allows me to select only two days ahead of the current one. for example: today is day 28/06/2018 it allow me to select from day 3, as it would count day 29/06 as day 1, skip weekend and count day 2 as day 2, soon releasing select from day 3

inserir a descrição da imagem aqui

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

									<div class="panel panel-default" id="panel_dadosdasolicitacao">
							<div class="panel-heading ">
								<h3 class="panel-title">
									<b>Dados da solicitação</b>
								</h3>
							</div>
							<div class="panel-body">
							<div class="row">
              <div class="col-md-3 form-group">	
              <label for="texto_3">Texto</label>	
              
              <input type="date" class="form-control">
              </div>
              </div>
              </div>
						</div>
					
					

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
    <script>
    
    
    </script>
    
  </body>
</html>

javascript html date

  • Please mark one of the answers with not to stay open. If you have any problems yet, you can comment by asking. Abs!

2 answers

3


  1. You can use the attribute min to restrict the dates that can be chosen by the user

   var hoje = new Date();
   var d1 = hoje.getDay();
   
   // os valores de d1 representam os dias da semana.
   // se for  sexta (5) ou sabado (6) 
   if(d1 == 5){
      dias += 2;
   }else if(d1 == 6){
      dias += 1;
   }else{
      dias = 3;
   }


var today = new Date();
today.setDate(today.getDate() + dias); //Voalá
today = today.toISOString().split('T')[0];

document.getElementsByName("date")[0].setAttribute('min', today);
<input type="date" id="no-spin" onkeypress="return false" name="date"  min="">

  1. Adding this line document.getElementById('txtDat').value= ""; in the code of dvd

   
function validadata(d){
   var data = d.value; // pega o valor do input
   data = data.replace(/\//g, "-"); // substitui eventuais barras (ex. IE) "/" por hífen "-"
   var data_array = data.split("-"); // quebra a data em array
   var dia = data_array[2];
   var mes = data_array[1];
   var ano = data_array[0];

   // para o IE onde será inserido no formato dd/MM/yyyy
   if(data_array[0].length != 4){
  dia = data_array[0];
  mes = data_array[1];
  ano = data_array[2];
   }

   var hoje = new Date();
   var d1 = hoje.getDate();
   var m1 = hoje.getMonth();
   var a1 = hoje.getFullYear();

   var d1 = new Date(a1, m1, d1);
   var d2 = new Date(ano, mes-1, dia);

   var diff = d2.getTime() - d1.getTime();
   diff = diff / (1000 * 60 * 60 * 24);
   
   var dias = 3; // número de dias pra frente
   var a = (d1.getDay()+1)%7; // dia da semana de hoje+1
   var da = (d1.getDay()+3)%7; // dia da semana de hoje+3

   // se for 6 (sábado) ou 0 (domingo)
   if(a == 6 || da == 6 || da == 0){
  dias += 2;
   }else if(a == 0){
  dias += 1;
   }

   if(diff < dias){
  document.getElementById('txtDat').value= "";
  console.log("Apenas data a partir do 3º dia");
   }else{
  console.log("Data válida!");
   }
}
<input type="date" id="txtDat" onchange="validadata(this)">

  • Ahh... reset the input

  • It is interesting this, but validating in JS already prevents any action

  • I set my code, it was inaccurate.

2

This function does this check (explanations in the code):

function validadata(d){
   var data = d.value; // pega o valor do input
   data = data.replace(/\//g, "-"); // substitui eventuais barras (ex. IE) "/" por hífen "-"
   var data_array = data.split("-"); // quebra a data em array
   var dia = data_array[2];
   var mes = data_array[1];
   var ano = data_array[0];

   // para o IE onde será inserido no formato dd/MM/yyyy
   if(data_array[0].length != 4){
      dia = data_array[0];
      mes = data_array[1];
      ano = data_array[2];
   }

   var hoje = new Date();
   var d1 = hoje.getDate();
   var m1 = hoje.getMonth();
   var a1 = hoje.getFullYear();

   var d1 = new Date(a1, m1, d1);
   var d2 = new Date(ano, mes-1, dia);

   var diff = d2.getTime() - d1.getTime();
   diff = diff / (1000 * 60 * 60 * 24);
   
   var dias = 3; // número de dias pra frente
   var a = (d1.getDay()+1)%7; // dia da semana de hoje+1
   var da = (d1.getDay()+3)%7; // dia da semana de hoje+3

   // se for 6 (sábado) ou 0 (domingo)
   if(a == 6 || da == 6 || da == 0){
      dias += 2;
   }else if(a == 0){
      dias += 1;
   }

   if(diff < dias){
      console.log("Apenas data a partir do 3º dia");
   }else{
      console.log("Data válida!");
   }
}
<input type="date" id="txtDat" onchange="validadata(this)">

  • Wow, but I only did what your code does when it calls the function, only I did before calling the function

  • is, because I think just check the same day... the validation has that sect in PHP

Browser other questions tagged javascript html date

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