Cant quite invalidate/validate dates correctly (arrival date) ?

Question

This is my html code with a snippet of just the code I am trying to use to invalidate/validate date entries with hopefully all of the corresponding and necessary variables declared.

       <html>
       <head>
       <title> Booking Page </title>

       <script>

       function Booking(){

        var departuredate = document.getElementById("departdate").value; //departure date selected by user
        var arrivaldate = document.getElementById("arrivedate").value; //arrival date selected by user

        departuredate = new Date(departuredate);
        arrivaldate = new Date(arrivaldate); 

        CurrentDate = new Date(); //todays date

                month = '' + (arrivaldate.getMonth() + 1),
                day = '' + arrivaldate.getDate(),
                year = arrivaldate.getFullYear();
                var adate = [day, month, year].join('/');
                alert(adate);

the adate is for the arrival date only. I plan to just copy and adjust the code across once it is correct for the departure date. Currently the code seems to invalidate all entries, not allowing completely valid entries to be validated.

         var re = /[0-9]{2}\/[0-9]{2}\/[0-9]{4}/;
         if (!adate.match(re))
         {
            document.getElementById("temp").innerHTML = "Incorrect format"
            document.MyForm.arrivedate.focus();
            document.getElementById("arrivedate").style.border='1px solid red';
            return false;
          } 

          else 
          {
            // if none of the above situaton's occur then the input is true and validated
            alert('Dates are validated');
            return true;          
           }

           }
           </script>

           </head>
           <body>

           <H1> Booking Form </H1>

          <Form action="testpage.py" method="POST" name="MyForm" onsubmit="return Booking()">


            <p>Departure Date:</p>
            <input type=date name="departdate" id="departdate" > 

            <p>Arrival Date:</p>
            <input type=date name="arrivedate" id="arrivedate">

            <input type=submit value="Find flights">

           </Form>        
           </body>
           </html>

I highly recommend using momentjs.com for your date validation/manipulation — Rob M., Feb 24 '16 at 18:58

Jared Smith · Answer 1 · 2016-02-24T19:07:12.990

You have multiple problems here. First is that the date type for inputs is non-standard, so it won't work in most browsers (IIRC chrome, edge, and iOS safari are the exceptions).

I recommend that you either use a third-party library like jquery-ui-datepicker or use a text input with the validation logic using the html pattern attribute or a js event handler if you have to support desktop safari (which doesn't support the pattern attribute).

Something like <input type="text" pattern="/[0-9]{2}\/[0-9]{2}\/[0-9]{4}/"...

Or if pattern won't work:

var myDateInput = document.getElementById('date-input');
myDateInput.addEventListener('change', function(e) {
  if (!(e.target.value.match(dateRegex)) {
    //let user know somehow
  }
});

You can throttle the handler so that it doesn't fire on successive keystrokes. Also note that even in browsers with the date input type they expect "yyyy-mm-dd" format, so make your regex:

/[0-9]{4}-[0-9]{2}-[0-9]{2}/.

Cant quite invalidate/validate dates correctly (arrival date) ?

1 Answers1