End Date greater than Start Date Validation

I am using this code for the validation, it works fine when using the default datepicker in html but when typing the date manually, it's not properly working. For example, when I type a start date then proceed to the endate, the year in the end date automatically reads only the first number of "2019" so you can't finish typing properly since it alerts and can't compare properly.

<input type="date" id="StartDate" />
<input type="date" id="EndDate" />
<script>
console.clear();
 var startDate = document.getElementById("StartDate").value;
 var endDate = document.getElementById("EndDate").value;

function compareDates() {
  if ((Date.parse(endDate) <= Date.parse(startDate))) {
    alert("End date should be greater than Start date");
    document.getElementById("EndDate").value = "";
   }
 }

startDate.addEventListener('input', compareDates);
endDate.addEventListener('input', compareDates);
</script>

Any tips?