0

I have some date comparison code that I am trying to adjust to my own project. I don't know much about javascript so I am trying to make sense of it. Basically the functions are set up but I also want them to display a message saying 'that date is invalid'. I started on the function not sure if it makes sense I copied it from some other javascipt The code is inline for now but I will separate everything later on. The CSS is from the original example. This was not showing though when I tested it but I could see in the console the javascript was working. Here is my code:

NOTE: I would like javascript not jquery solutions please, just for my assignment it is required that we use javascript only. 

<style>

    input.okay{
        color: green;
    }

    input.invalid{
        color: yellow;
    }

</style>


<h1>Date comparrison</h1>

<form action="">

    <div class="row">
        <label for="arrival">Arrival</label>
        <input type="date" id="arrival">
    </div>

    <div class="row">
        <label for="checkout">Checkout</label>
        <input type="date" id="checkout">
    </div>

    <div class="row">
        <input type="submit" id="submit">
    </div>

</form>

<script>
        var submit_button = document.querySelector('#submit');
        var arrival = document.querySelector('#arrival');
        var checkout = document.querySelector('#checkout');

        checkout.onblur = checkDates;

        function checkDates() {
            var valid = true;

            if(isValidDate(arrival.value) && isValidDate(checkout.value)) {
                valid = false;
                var arrival_date = new Date(arrival.value).valueOf();
                var checkout_date = new Date(checkout.value).valueOf();
                    if(arrival_date > checkout_date) {
                        valid = false;
                    }
                } else {
                    valid = false;
                    displayError('arrival', 'That date is invalid');
                } else {
                    hideError('arrival');
                    return valid;
            }
        }


        function isValidDate(str) {
            var datePattern = /^\d{2,4}\-\d{1,2}\-\d{1,2}$/;
            return datePattern.test(str);
        }

        submit_button.onclick = function() {
            console.log(checkDates());
            return false;
        }
</script>
sfletche
  • 47,248
  • 30
  • 103
  • 119
Birdlady9604
  • 207
  • 5
  • 18
  • 1
    Why are you using `querySelector` for an id? `getElementById()` is faster and specifically for just that -- selecting by ID. Also, change the id for submit. I can't remember properly, but I've run into name conflictions before because of it. – Sterling Archer May 10 '14 at 06:17
  • 1
    just edited your code and noticed you were missing a closing curly brace for your `checkDates` function (fyi - in case that in itself is the solution) – sfletche May 10 '14 at 06:18
  • There are better ways to [validate a date](http://stackoverflow.com/questions/5812220/how-to-validate-a-date). Giving a form control a name or ID of "submit" shadows the form's submit method so you can't call it. – RobG May 10 '14 at 07:00
  • @RobG I put this in a form with other inputs but its not displaying the message. I thought maybe if I remove the submit function the message would appear when its onblur but still doesn't work :/ – Birdlady9604 May 10 '14 at 08:20

2 Answers2

0

You had some syntax errors in your code. Especially the 

if(arrival_date > checkout_date){
                valid = false;
            }
        }else{

part. I created a jsFiddle for you and included 2 functions for you to play with. Here: http://jsfiddle.net/r5y4y/

Here are the 2 functions (they require a div with the id selector though)

function hideError(selector) {
     document.getElementById(selector).innerHTML = null;   
}
function displayError(selector, text) {
     document.getElementById(selector).innerHTML = text;   
}

So if you have a <div id="arrival"></div>, you can call displayError('arrival', 'That date is invalid'); which will set the innerHTML of div with the ID arrival to "That date is invalid"

ReGdYN
  • 536
  • 2
  • 7
  • thanks :) how would I target the error message of the id #arrival to style it? – Birdlady9604 May 10 '14 at 06:36
  • I modified my jsFiddle a little: http://jsfiddle.net/r5y4y/3/ . Check the function `displayError(selector, text)`. P.S. There was an error before. I modified the div ID from arrival to arrivalerror (there already was an element with the id arrival)! – ReGdYN May 10 '14 at 06:40
  • It does, at least it should. It does not show it in the `if(arrival_date > checkout_date)` block, but you can add a `displayError('arrivalerror', 'That date is invalid');` after the `valid=false;` (http://jsfiddle.net/r5y4y/4/) – ReGdYN May 10 '14 at 06:56
0
   function isValidDate(str) {
        var datePattern = /^\d{2,4}\-\d{1,2}\-\d{1,2}$/;
        return datePattern.test(str);
    }   

  function addClass(id,class_name) {
    var ele=document.getElementById(id);
    ele.setAttribute("class",class_name);
    return;
  } 

  function Test() {
        var arival_value = document.getElementById('arrival').value;
        var check_value = document.getElementById("checkout").value;

        if(isValidDate(arival_value) && isValidDate(check_value)){
                    var adate = new Date(arival_value).valueOf();
                    var cdate = new Date(check_value).valueOf();

                    if(adate>cdate){
                            alert("Arival Date is greater than checkout date");
                            addClass("arrival","invalid");
                            addClass('checkout',"invalid");
                        }                       
                        else{alert("Date is valid");
                            addClass("arrival","okay");
                            addClass('checkout',"okay");
                        }
                    }
                    else{ alert("date format is not correct");return; }


            return;

    }
raton
  • 418
  • 5
  • 14