1

Estou fazendo um sistema e tentei usar javascript para garantir que o usuário não dê o SUBMIT com a data final antes da data inicial. Quase tudo deu certo, mas no input DATE_END não é mais possível digitar uma data ou hora, apenas usando as setas cima e baixo.

O código fonte completo é:

    <!DOCTYPE html>
    <html>
        <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>End After Start</title>
        <script type="text/javascript">
            function datestart(value){
                document.getElementById("date_end").value = value;
            }
            function dateend(value){
                var vdatestart = document.getElementById("date_start").value;
                if (value<vdatestart){
                    document.getElementById("date_end").value = vdatestart; 
                }
            }
        </script>
        <style>
            .col-30 {
                    float: left;
                    width: 30%;
                    margin-top: 6px;
            }
            .col-70 {
                    float: left;
                    width: 70%;
                    margin-top: 6px;
            }
            .container {
                    border-radius: 5px;
                    background-color: #f2f2f2;
                    padding: 20px;
            }
            .row:after {
                    display: table;
                    clear: both;
            }
        </style>
        </head>
        <body>
            <?php
                $datemin = '2018-05-01T00:00';
                $datemax = '2018-05-22T08:00';
                $currentdate = '2018-05-22T08:00';
            ?>
            <div class="container">
                <form name="form1" action="datetime1.php" method = "post">  

                    <div class="row">
                        <div class="col-30">
                            <label>Start Date and Time from Start:</label>
                        </div>
                        <div class="col-70">
                            <input type='datetime-local' name='date_start' id='date_start' min='<?php echo $datemin; ?>' max='<?php echo $datemax; ?>' required value='<?php echo $currentdate; ?>' onchange="datestart(this.value);" onclick="datestart(this.value);" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-30">
                            <label>End Date and Time:</label>
                        </div>
                        <div class="col-70">
                            <input type='datetime-local' name='date_end' id='date_end' min='<?php echo $datemin; ?>' max='<?php echo $datemax; ?>' required value='<?php echo $currentdate; ?>' onchange="dateend(this.value);" onclick="dateend(this.value);" />
                        </div>
                    </div>
                    <div class="row">
                        <input type="submit" name="submit" value="Send">
                    </div>


                </form>
            </div>
        </body>
    </html>

Tentei colocar em um servidor online, mas não consegui por conta do PHP que é a linguagem principal do sistema. Alguém teria alguma solução que não fosse despois do SUBMIT?

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

1 Resposta 1

1

O JQuery te permite controlar quando o submit vai realizar a action, e dessa forma vc pode validar a data antes de ser executado a action do submit.

Segue o código para deixar claro o que estou falando:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>submit demo</title>
  <style>
  p {
    margin: 0;
    color: blue;
  }
  div,p {
    margin-left: 10px;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>Type 'correct' to validate.</p>
<form action="javascript:alert( 'success!' );">
  <div>
    <input type="text" id="dataIni">
    <input type="text" id="dataFim">
    <input type="submit">
  </div>
</form>
<span></span>


<script>
$("form").submit(function(event) {
  if ($("#dataIni").val() < $("#dataFim").val()) {
    $("span").text("Validated...").show();
    return;
  }

  $("span").text("Not valid!").show().fadeOut(1000);
  event.preventDefault();
});
</script>

</body>
</html>
3
  • Só que eu preciso mostrar a data e hora e ter mínimo e máximo além de mostrar o calendário. Isso no HTML já vem pronto. Commented 23/05/2018 às 11:02
  • Cara, aí já é outro problema. Você vai precisar usar um jquery ui, ou qualquer outra lib para user interface. Esse link vai te ajudar: jqueryui.com/datepicker Commented 23/05/2018 às 22:25
  • A empresa pegou pavor do java/javascprit entre outros... como o HTML5 já tem o calendário....isso está certo... o problema que javascript em algum momento bloqueia de digitar a data e a hora na data final da tarefa Commented 24/05/2018 às 19:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .