End Date after Start Date Input Form

Question

End Date after Start Date Input Form

Asked 6 years, 6 months ago

Viewed 188 times

1

I am making a system and tried to use javascript to ensure that the user does not give the SUBMIT with the final date before the initial date. Almost everything worked out, but in DATE_END input it is no longer possible to enter a date or time, just using the up and down arrows.

The complete source code is:

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

I tried to put it on an online server, but I couldn’t because of PHP which is the main language of the system. Would anyone have any solution other than after SUBMIT?

1 answer

Browser other questions tagged php javascript html html5

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

by Micael Pereira • 36 points · Answer 1 · 2018-05-22T17:30:10+00:00

Jquery lets you control when Submit will perform the action, so you can validate the date before the Submit action is executed.

Follow the code to make clear what I’m talking about:

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