Date End after Date Start Input Form

Question

Date End after Date Start Input Form

Navigation

#1 by (1 votes)

1

I'm doing a system and tried using javascript to ensure the user does not give the SUBMIT with the end date before the start date. Almost everything went fine, but input DATE_END 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 could not because of PHP that is the main language of the system. Would anyone have a solution other than SUBMIT?

php javascript html html5

asked by anonymous 22.05.2018 / 16:00

1 answer

how to download text in div Problem with updating a Fragment

score 1 · Answer 1

JQuery allows you to control when submit is going to perform the action, so you can validate the date before the submit action is executed.

Follow the code to make it 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'tovalidate.</p><formaction="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>