Jump to content
gleidsonb12

Mostrar DIV se a data selecionada no input for maior que a data atual mais 5 dias

Recommended Posts

Bom dia amigos, estou iniciando no javascript e tenho seguinte problema, preciso que o javascript mostre uma campo justificativa se a data selecionada no input for superior a 5 dias da data atual.

 

O script que estou tentando dazer funcionar é este:

 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
<script>
function obtemMes() {
  var mes = document.getElementById("dataselecionada").value;
  if (mes<>"2019-03-15"){document.getElementById("mes").style.display = "none";}
</script>

<div class="form-group col-md-3">
    <label>Data</label>
    <input type="date" id="dataselecionada" class="form-control" onchange="obtemMes()">
</div>

<div class="form-group col-md-3" id="mes">
    <label>Mes</label>
    <input type="text" class="form-control">
</div>

Qualquer ajuda é bem vinda

Share this post


Link to post
Share on other sites

@gleidsonb12

 

Você pode tentar dessa forma. Fiz um exemplo básico no qual vai ser exibido um 

textarea

Caso o dia selecionado seja superior a 5

 

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="utf-8">

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

	<style type="text/css">
		.no-visible {
			display:none;
		}
	</style>

</head>
<body>

	<div class="form-group col-md-3">
	    <label>Data</label>

	    <!-- Adicionado um name -->
	    <input type="date" id="dataselecionada" name="dataselecionada" value="" class="form-control" onchange="obtemMes()">
	</div>

	

	<div class="form-group col-md-3" id="mes">
	    <label>Mes</label>
	    <input type="text" class="form-control">
	</div>

	<div class="no-visible" id="form-justificativa">
		<form action="" method="post">
			<label for="justificativa">Justificativa</label> <br>
			<textarea rows="3" cols="25"></textarea>
		</form>
	</div>


	<script>
		function obtemMes() {

			var input_data = document.getElementById("dataselecionada"); // Seleciona o input pelo seu ID
			var dia_selecionado = input_data.value; // Armazena o valor do input na variável
			var obj_date = new Date(dia_selecionado); // cria o objeto da classe Date no qual recebe por parâmetro a data selecionada

			var dia_selecionado = (obj_date.getDate()+1); // Pega apenas o dia da data que foi selecionada

			validarDia(dia_selecionado);
		}

		function validarDia(dia_selecionado) {
			var tempo_estimado = '5';

			var obj_data_atual = new Date();
			var dia_atual = obj_data_atual.getDate(obj_data_atual);
			var result = (dia_selecionado - dia_atual);

			var form = document.querySelector('#form-justificativa');

			if(result >= tempo_estimado) {
				form.style.display = 'block';
			} else {
				form.style.display = 'none';
			}
		}

	</script>

</body>
</html>

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Guss
      A programadora Cafiaspirina Cruz deseja que todos os elementos <h2> de sua página ganhassem a classe "titulo", para que depois a fonte dos <h2> pudesse ser modificada por um CSS,  deixando-os com um destaque específico. Escreva abaixo um código em Javascript para que todos os <h2> da página ganhem a classe "titulo" de uma única vez?
    • By mxclxrx
      l>
          <head>
              <title>Pergunta 1</title>
          </head>
          <body>
              
              <h3>Pergunta 1</h3>
              <form name="resp" action="pergunta2.php" method="POST">
                  O que é nanotecnologia?<br><br>
                      a)<input type="radio" name="resposta" value="a">é a teoria física que obtém sucesso no estudo dos sistemas físicos cujas dimensões são próximas ou abaixo da escala atômica, tais como moléculas, átomos, elétrons, prótons e de outras partículas subatômicas, muito embora também possa descrever fenômenos macroscópicos em diversos casos.<br><br>
                      b)<input type="radio" name="resposta" value="b">é o estudo de manipulação da matéria em escala atômica e molecular e incluí o desenvolvimento de materiais que está associada a diversas áreas como a medicina, eletrônica, ciência da computação, física, química, biologia e engenharia dos materiais entre outras.<br><br>
                      c)<input type="radio" name="resposta" value="a">é a ciência que estuda a composição, estrutura, propriedades da matéria, as mudanças sofridas por ela durante as reações químicas e a sua relação com a energia.<br><br>
                      d)<input type="radio" name="resposta" value="a">baseia-se na lei da conservação das massas, na lei das proporções definidas e na lei das proporções múltiplas. <br><br>
                      e)<input type="radio" name="resposta" value="a">são protozoários caracterizados pela presença de organelos em forma de pêlos ou tentáculos sugadores chamados cílios.<br><br>
                      
                      <br><br>
                      <input type="submit" name="confirmar" value="confirmar">
              </form>
              <?php
                  
                  if(isset($_POST['confirma'])){
                      $resposta= $_POST['resposta'];
                      $certa= $_POST['certa'];
                      $certa= "b";s
                  
                  if($resposta==$certa){
                      echo('<script>window.alert("Parabens! Voce acertou!");window.location="pergunta2.php";</script>');
                  }else{
                      header('location:pergunta1.php');
                  }
                  }
              ?>
              
          </body>
      </html>
    • By rodbacana
      Boa noite senhores(a),
       
      estou iniciando agora com react native e firebase, estou tentando criar uma aplicação 
      onde você loga com e-mail e senha, logo após irá aparecer uma lista com as ações da bolsa de valor pra que você possa escolher uma delas.
      Quando clicar sobre qualquer uma, será exibido um gráfico com as oscilações, e o usuário poderá criar um alerta que quando a ação atingir uma valor(seja ele positivo ou negativo)
      o celular dispare uma alerta.
       
      A questão é: a tela de login e as validações, eu consegui fazer. Mas não faço a mínima idéia de como criar os gráficos baseados no consumo de uma api rest que eu tenho aqui.
       
      Alguém pode me ajudar ?
       
    • By JenneferBarbosa
      Pessoal, sou nova aqui no Fórum e estou começando a estudar PHP. Estou com dúvidas quanto a pesquisa com vários campos, consegui fazer para um campo só, porém quando tento para vários campos não funciona. Fiz algumas pesquisas e só consegui achar buscas com 'selects e options' e eu queria que ele pegasse o que foi digitado no input e fizesse a busca, mas o usuário não precisaria informar todos os campos (se não quisesse). Quando clico em 'Pesquisar' aparece todos os dados do banco. E uma outra dúvida, como faz para que os dados pesquisados sejam exibidos na mesma tela (abaixo do formulário de pesquisa)
      <form method="POST" id="form-pesquisa" action="busca.php"> Livro: <input type="text" name="nome" id="nome" placeholder="Fulano de Tal"> Autor: <input type="text" name="autor" id="autor" placeholder="Fulano de Tal"> Edicao: <input type="text" name="edicao" id="edicao" placeholder="Fulano de Tal"> <input type="submit" name="enviar" value="Pesquisar"> </form> <ul class="resultado"></ul> $nome = $_POST['nome']; $autor = $_POST['autor']; $edicao = $_POST['edicao']; //Pesquisar no banco de dados nome do livro referente a palavra digitada pelo usuário $livros = "SELECT * FROM livro WHERE nome OR autor OR edicao ORDER BY nome ASC"; $resultado_livros = mysqli_query($conn, $livros); if (mysqli_num_rows($resultado_livros) <= 0) { echo "Nenhum livro encontrado..."; } else { while ($rows = mysqli_fetch_assoc($resultado_livros)) { echo "<li>" . $rows['codigo'] . "</li>"; echo "<li>" . $rows['nome'] . "</li>"; echo "<li>" . $rows['autor'] . "</li>"; echo "<li>" . $rows['edicao'] . "</li>"; } } . Como se ele fizesse a busca internamente e mostrasse ao usuário o que ele pesquisou sem ele sair da tela em que está o form
    • By oomaikoo
      Boa noite pessoal, estou tentando fazer um código, para mostrar um banner em meu site, quando o usuário entrar, baseado na localização dele. É basicamente o seguinte: a API de geolocalização retorna o nome da cidade, e, se for a cidade, então mostre o banner. Se não for, mostre outro. O código JavaScript que estou usando é esse:
      <script type="application/javascript"> function geoip(json){ var city = document.getElementById("user_city"); city.textContent = json.city; } </script> <script async src="https://get.geojs.io/v1/ip/geo.js"></script> A cidade é: <span id="user_city"></span>

      Esse código retorna o nome da cidade no <span id>.

      Porém eu preciso fazer um IF, ELSE no próprio JavaScript, para mostrar o banner ou não. Seria basicamente assim:
      <script type="application/javascript"> function geoip(json){ var city = document.getElementById("user_city"); city.textContent = json.city; } if (city == "nomedacidade") { document.write ("<img src='banner1.jpg'></img>"); } else { document.write ("<img src='banner2.jpg'></img>"); } </script> <script async src="https://get.geojs.io/v1/ip/geo.js"></script>

      O problema é que a variável city não fica setada dentro do if, não retorna o nome da cidade, eu só queria comparar no if o nome da cidade com o que a API retorna.
      Alguém tem alguma ideia?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.