JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div>
  <label for="startDate">startDate</label>
  <input type="text" id="startDate" />
</div>
<div>
  <label for="endDate">endDate</label>
  <input type="text" id="endDate">
</div>
<div id="result">- </div>

CSS

#result {
  padding: 5px;
  margin: 5px;
  display: inline-block;
}

JavaScript

var opts = {
  changeYear: true,
  changeMonth: true,
  dateFormat: 'MM-dd-yy',
  onSelect: checkDate
};
$("#startDate").datepicker(opts);
opts.dateFormat = 'dd-MM-yy'
$("#endDate").datepicker(opts);

function checkDate() {
  var startDate = $('#startDate').datepicker().val();
  var endDate = $('#endDate').datepicker().val();
  
  if(!startDate || !endDate)return;
  
  if (Date.parse(startDate) >= Date.parse(endDate)) {
    alert("Start date can not be greater than or equal to end date.");
  } else {
    alert('ok');
  }
}