JSFiddle - React, Tailwind, and code Playground

by Mohit Kumar Gupta

HTML

<script src="http://flex-maintenance.co.uk/login/dashboard/js/jquery.ui.core.js"></script>
<script src="http://flex-maintenance.co.uk/login/dashboard/js/jquery.ui.widget.js"></script>
<script src="http://flex-maintenance.co.uk/login/dashboard/js/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="http://flex-maintenance.co.uk/login/dashboard/js/jquery.ui.all.css">
<form method="post">From
    <input type="text" id="from1" name="from" class="txt-input" style="width:80px;">To
    <input type="text" id="to" name="to" class="txt-input" style="width:80px;">
</form>
<br>
<br>
<form method="post">From
    <input type="text" id="invfrom" name="from" class="txt-input" style="width:80px;">To
    <input type="text" id="invto" name="to" class="txt-input" style="width:80px;">
</form>

JavaScript

var dates = $("#from1, #to").datepicker({
		    changeMonth: true,
		    dateFormat: 'dd/mm/yy',
		    onSelect: function (selectedDate) {
               
		        var option = this.id == "from1" ? "minDate" : "maxDate",
		            instance = $(this).data("datepicker"),
		            date = $.datepicker.parseDate(
		            instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
		            selectedDate, instance.settings);
		        dates.not(this).datepicker("option", option, date);
		    }
		});
		var invdates = $("#invfrom, #invto").datepicker({
		    changeMonth: true,
		    numberOfMonths: 1,
		    dateFormat: 'dd/mm/yy',
		    onSelect: function (selectedDate) {
                
		        var option = this.id == "invfrom" ? "minDate" : "maxDate",
		            instance = $(this).data("datepicker"),
		            date = $.datepicker.parseDate(
		            instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
		            selectedDate, instance.settings);
		        invdates.not(this).datepicker("option", option, date);
		    }
		});