JSFiddle - React, Tailwind, and code Playground

by Sanal S

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="row">
  <div class="col-lg-12">
    <div class="col-lg-4">
      <div class="form-group">
        <label>From Date</label>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="input-group date">
        <input class="form-control" text="1" exist="1" id="txtFDate" name="txtFDate">
        <span class="input-group-addon">
                                                            <i class="glyphicon glyphicon-th"></i>
                                                        </span>
      </div>
    </div>
    <div class="col-lg-1"></div>
    <div class="col-lg-1">
      <div class="form-group">
        <label>To Date</label>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="input-group date">
        <input class="form-control" text="1" exist="1" id="txtTDate" name="txtTDate">
        <span class="input-group-addon">
                                                            <i class="glyphicon glyphicon-th"></i>
                                                        </span>
      </div>
    </div>
  </div>
</div>

JavaScript

$('#txtFDate').datepicker({
  format: "dd-mm-yyyy",
  autoclose: true,
  todayHighlight: true,
  startDate: Date()
}).on('changeDate', function(e) {
  $('#txtTDate').datepicker('setStartDate', e.date);
});

$('#txtTDate').datepicker({
  format: "dd-mm-yyyy",
  autoclose: true,
  todayHighlight: true,
  startDate: Date()
}).on('changeDate', function(e) {
  $('#txtFDate').datepicker('setEndDate', e.date);
});
$('#txtFDate').datepicker("setDate", "0");
$('#txtTDate').datepicker("setDate", "0");