JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<div class="form-group">
<label class="control-label col-sm-2" for="stage" id="doc1"><b>(b)</b>Date of last Calving:</label>
<div class="col-sm-4">
<input type="text" name="doc" id="doc2" placeholder="DD-MM-YYYY" class="form-control" onkeypress="return false">
</div>
</div>
<div class="form-group" id="doi">
<label class="control-label col-sm-2" for="stage" ><b>(e)</b>Date of last Insemination:</label>
<div class="col-sm-4">
<input type="text" name="doi" class="form-control" id="doi4" placeholder="DD-MM-YYYY" onkeypress="return false">
</div>
</div>
JavaScript
$(document).ready(function () {
var date = new Date();
var currentMonth = date.getMonth();
var currentDate = date.getDate();
var currentYear = date.getFullYear();
var changedYear = date.getFullYear()-2;
$('#doc2').datepicker({
minDate: new Date(changedYear, currentMonth, currentDate),
maxDate: new Date(currentYear,currentMonth,currentDate),
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
constrainInput: true
});
});
$(document).ready(function () {
var date = new Date();
var cDate=$('#doc2').val();
alert(cDate);
cDate.setDate(cDate.getDate()+45);
var date=new Date(cDate);
var currentMonth = date.getMonth();
var currentDate = date.getDate();
var changedDate = date.getDate()-270;
var currentYear = date.getFullYear();
$('#doi4').datepicker({
minDate: new Date(currentYear, currentMonth, changedDate),
maxDate: new Date(currentYear,currentMonth,currentDate),
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
constrainInput: true
});
});