JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="col-xs-12 col-sm-6 col-md-6">
<label>Total work experience</label>
<label class="years_lab" id="txt_expy"><span></span></label> Years
<label class="years_lab" id="txt_expm"><span></span></label> Months
</div>
<div id="expy-0" class="wrk_exp cloned-row3">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
<label><span class="required-star-black">*</span>Job Title</label>
<br/>
<input type="text" maxlength="50" class="chk_Field ipt_Field required_Field chk_Field_exp" id="txt_Jbt" name="txt_Jbt" />
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
<label><span class="required-star-black">*</span>Employer</label>
<br/>
<input type="text" maxlength="50" class="chk_Field ipt_Field required_Field chk_Field_exp" id="txt_Empl" name="txt_Empl" />
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
<label><span class="required-star-black">*</span>From Date</label>
<br/>
<div class="input-group">
<input type="text" placeholder="MM/DD/YYYY" class="chk_Field chk_Field_exp ipt_Field startDate datepicker required_Field" id="txt_Fdob" name="txt_Fdob" />
<p class="form-control-feedback"><i class="fa fa-calendar custom-mar"></i></p>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
<label><span class="required-star-black">*</span>To Date</label>
<br/>
<div class="input-group">
<input type="text" placeholder="MM/DD/YYYY" class="chk_Field chk_Field_exp ipt_Field endDate datepicker required_Field" id="txt_Tdob" name="txt_Tdob" />
<p class="form-control-feedback"><i class="fa fa-calendar custom-mar"></i></p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12...
JavaScript
var diffDays = 0,
diffMonths = 0,
diffYears = 0,
dateRegex = new RegExp("(0|1)[0-9]\/[0-3][0-9]\/(19|20)[0-9]{2}");
$(".datepicker").datepicker({
dateFormat: "mm/dd/yy",
changeMonth: true,
yearRange: "-100:+0",
changeYear: true,
maxDate: new Date(),
showButtonPanel: false,
beforeShow: function() {
setTimeout(function() {
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
}
});
var count = 0;
function monthDiff(d1, d2) {
var months;
months = (d2.getFullYear() - d1.getFullYear()) * 12;
months -= d1.getMonth();
months += d2.getMonth();
return months <= 0 ? 0 : months;
}