JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">
<input id="from-date" type="text" class="form-control" placeholder="From">
<input id="to-date" type="text" class="form-control" placeholder="To">
<input id="total-count" class="form-control" placeholder="Total no. of Years, Months and Days.">
JavaScript
$(function() {
// create the from date
$('#from-date').datepicker({
autoclose: true,
format: 'dd-mm-yyyy',
}).on('changeDate', function(ev) {
ConfigureToDate();
});
$('#to-date').datepicker({
autoclose: true,
format: 'dd-mm-yyyy',
startDate: $('#from-date').val()
});
// Set the min date on page load
ConfigureToDate();
// Resets the min date of the return date
function ConfigureToDate() {
$('#to-date').val("").datepicker("update");
$('#to-date').datepicker('setStartDate', $('#from-date').val());
}
});