Release Field after date

Asked

Viewed 81 times

-1

Hello I need a javascript code in which I will have two fields one with the date and a Description that will be unlocked according to the given date and block the previous Example

inserir a descrição da imagem aqui

From the day 06/06/2018 the previous field is locked and unlocked the next field and so on

inserir a descrição da imagem aqui

<!doctype html>
<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">

<!-- 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>
<title></title>
</head>
<body>
<h1>Desbloquear Campo Após Data</h1>
<div class="row">
              <div class="bs-example align-content-md-center">
                <table class="table table-condensed">
                  <thead>
                    <tr>
                      <th>Datas</th>
                      <th>Prazo</th>
                      <th>Campo</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><strong>Data 1</strong></td>
                      <td><div class="input-group enable-calendar">
                          <input type="text" class="form-control" id="data1" mask="00/00/0000" value="05/06/2018" readonly>
</div></td>
                      <td><input class="form-control" type="text" id="descricao1" name="descricao1" placeholder="Descrição" ></td>
                    </tr>
                    <tr>
                      <td><strong>Data 2</strong></td>
                      <td><div class="input-group enable-calendar">
                          <input type="text" class="form-control" id="data2" mask="00/00/0000" value="06/06/2018" readonly>
</div></td>
                      <td><input class="form-control" type="text" id="descricao2" name="descricao2" placeholder="Descrição" readonly></td>
                    </tr>
                    <tr>
                      <td><strong>Data 3</strong></td>
                      <td><input type="text" class="form-control" name="data3" id="data3" value="07/06/2018" readonly></td>
                      <td><input class="form-control" type="text" id="descricao3" name="descricao3" placeholder="Descrição" readonly></td>
                    </tr>
                  </tbody>
                </table>
              </div>
</div>






</body>
</html>

javascript html jquery

  • What’s the matter, I don’t understand?

  • I need a code js that unlocks the field according to the date, example day if it is day 05/06/2018 the field will be unlocked, after that date it will block the field. I edited the question, see if it helps.

  • 1

    What do you already know about Javascript? What did you try to do? Why didn’t it work? Did an error message appear? Which one? If not, just generated an unwanted result? Which?

1 answer

1


First you will need to take the value that is being changed or be the current date ai depends on you, when the form is loaded (put this in the header :

      $(document).ready(function(){
        $("#data1").change(function() {
         var data1 = document.getElementById("data1").value;
         // faça o seu IF aqui com a condição
         document.getElementById('descricao1').readOnly = false;
        });
       });

Browser other questions tagged javascript html jquery

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