CODEWITHSUNDEEP
javascripthtml
AnotherUser
AnotherUser

Reputation: 147

Checking 2 dates with Javascript

I'm trying to check if arrivedate is the same as leavedate then it should show an alert box saying "Please change arrivedate".

Why isn't it working in JavaScript.

Leaving: <input type='date' id='mydateL' class="icon"></input>
Returning: <input type='date' id='mydateR' class="icon"></input>
<input type="button" value="test" onclick="datetimevalidation()"


<script>

function datetimevalidation() {

    var leavedate = new Date(document.getElementById("mydateL").value);
    var arrivedate = new Date(document.getElementById("mydateR").value);      

    if(leavedate == arrivedate) {        
         alert('Please change arrivedate.');
}

}
</script>

Upvotes: 0

Views: 58

Answers (4)

RobG
RobG

Reputation: 147413

You haven't supplied sufficient information to answer the question precisely, so only general advice can be given.

Input type date isn't supported by all browsers in use, so simply converting whatever the user inputs to a date object without first validating the input will not be a robust solution.

Consider a British user with settings for dates in the format dd/mm/yyyy who enters 23/11/2015. This value is then parsed using the Date constructor.

In Chrome (which supports date inputs), the input will provide a hint of dd/mm/yyyy based on system settings. The value returned by the input's value property will be a string of 2015-11-23, which will be parsed by the Date constructor in Chrome as a local date.

In Firefox v42, which doesn't support Date inputs, the string will be returned exactly as entered by the user. Firefox will parse 23/11/2015 as if it was mm/dd/yyyy and return a date for 11/11/2016.

Safari 9 also doesn't support date inputs and will try to parse it as mm/dd/yyyy like Firefox, but will return an invalid date (since there is no month 23).

Omniweb 6 acts like Safari.

So the statement that "it doesn't work" is not surprising. For a robust date input, you will have to:

  1. Specify the format that users should enter
  2. Validate that the value entered is a valid date
  3. Compare the values

If valid strings are entered, they can be compared for equality directly, there is no need to convert them to Date objects. However, if date objects are required later, there's no harm in comparing dates if they are converted to numbers, e.g.

if (+date0 == + date1) {
  // Dates are equal
}

The dates must be converted to number first as otherwise == will compare them as objects, and no two objects are ever equal so the result will always be false unless d0 and d1 reference the same date object (which, given comments on the OP, seems to be the problem, in Chrome at least).

Upvotes: 0

Raghvendra Kumar
Raghvendra Kumar

Reputation: 1398

Leaving: <input type='date' id='mydateL' class="icon"></input>
Returning: <input type='date' id='mydateR' class="icon"></input>

<button onclick="myFunction()">Click me</button>

Try to convert the date object and the comparison will work : 

 function myFunction() 
    {

      var leavedate = new Date(document.getElementById("mydateL").value);

      leavedate = leavedate+ "";

      var arrivedate = new Date(document.getElementById("mydateR").value); 

      arrivedate = arrivedate+ ""; 


      if(leavedate == arrivedate) 
        {        
             alert('Please change arrivedate.');
        }

    }

Upvotes: 0

Ramanlfc
Ramanlfc

Reputation: 8354

just convert the dates into longs for comparison.

 var leavedate = +new Date(document.getElementById("mydateL").value);
 var arrivedate = +new Date(document.getElementById("mydateR").value);


    if(leavedate == arrivedate) {        
         alert('Please change arrivedate.');
}

Upvotes: 1

ozil
ozil

Reputation: 7117

you need to use getFullYear(), getMonth() and getDate() in you if condition. 

Leaving:
<input type='date' id='mydateL' class="icon"></input>Returning:
<input type='date' id='mydateR' class="icon"></input>
<div onclick="datetimevalidation()">Click Me</div>
<script>
    function datetimevalidation() {

        var leavedate = new Date(document.getElementById("mydateL").value);
        var arrivedate = new Date(document.getElementById("mydateR").value);

        if (leavedate.getFullYear() == arrivedate.getFullYear() && leavedate.getMonth() == arrivedate.getMonth() && leavedate.getDate() == arrivedate.getDate()) {
            document.write('Please change arrivedate.');
        }

    }
</script>

Upvotes: 0

Related Questions