JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="container">
	<div class="row">
		<div class="col-12 form-group has-feedback">
			<label>From <span class="text-danger">*</span></label>
			<input type="text" class="form-control has-feedback-left" id="fromdate" 
				   placeholder="MM/DD/YYYY" name="fromdate">
		</div>
		<div class="col-12 form-group has-feedback">
			<label>To <span class="text-danger">*</span></label>
			<input type="text" class="form-control has-feedback-left" id="todate" 
				   placeholder="MM/DD/YYYY" name="todate">
		</div>
		<!--<div class="col-12 form-group has-feedback">
			<label>Number of days <span class="text-danger">*</span></label>
			<input type="text" class="form-control has-feedback-left" name="numberdays" 
				   id="numberdays" disabled>
		</div>-->
	</div>  
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

$(function () {
    let $fromDate = $('#fromdate'),
        $toDate = $('#todate');
    //$numberDays = $('#numberdays');

    $fromDate.datepicker({
        dateFormat: 'dd-M-yy'
    }).on('change', function () {
        $toDate.datepicker('option', 'minDate', $(this).val());
        //$numberDays.val(calculateDateDiff($toDate.val(), $(this).val()));
    });

    $toDate.datepicker({
        dateFormat: 'dd-M-yy'
    }).on('change', function () {
        $fromDate.datepicker('option', 'maxDate', $(this).val());
        //$numberDays.val(calculateDateDiff($(this).val(), $fromDate.val()));
    });

    /*     function calculateDateDiff(endDate, startDate) {
            if (endDate && startDate) {
                let e = moment(endDate),
                    s = moment(startDate);
    
                return e.diff(s, "days");
            }
    
            return null;
        } */
});