Only allow to select two days ahead

Question

Only allow to select two days ahead

Asked 6 years, 6 months ago

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

<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>

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

– Sam

2018/07/14 at 07:27

2 answers

3

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="">

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

– Sam

2018/06/29 at 01:30
It is interesting this, but validating in JS already prevents any action

– Sam

2018/06/29 at 01:31
I set my code, it was inaccurate.

– Sam

2018/06/29 at 13:10

Browser other questions tagged javascript html date

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

by Sam • **79,597** points · Answer 1 · 2018-06-28T23:52:41+00:00

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)">