JSFiddle - React, Tailwind, and code Playground

by Hifni Nazeer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="card">
  <div class="card-header">Cash Transaction Detail</div>
  <div class="card-body">
    <div class="form-row">
      <form class="col-md-6 mb-3">
        <label for="inputFromDate">From</label>
        <input type="text" class="form-control datepicker" id="inputFromDate" placeholder="Date" value="2018-11-08" readonly>
      </form>
      <form class="col-md-6 mb-3">
        <label for="inputToDate">To</label>
        <input type="text" class="form-control datepicker" id="inputToDate" placeholder="Date" value="2018-11-08" readonly>
      </form>
    </div>
    <button type="button" class="btn btn-primary" id="btnCashStatementQuery" data-toggle="modal" data-target="#modalCashTxDetail" data-accountid="JKB123456789VN00">Submit</button>
  </div>
</div>

JavaScript

$(document).ready(function() {
  $(function() {
    var dateFormat = 'yy-mm-dd',
      from = $('#inputFromDate')
      .datepicker({
        defaultDate: new Date(),
        changeMonth: true,
        changeYear: true,
        numberOfMonths: 1,
        maxDate: "-1D",
        dateFormat: dateFormat
      })
      .on("change", function() {
        $(this).valid();
        to.datepicker("option", "minDate", getDate(this));
      }),
      to = $('#inputToDate').datepicker({
        defaultDate: new Date(),
        changeMonth: true,
        changeYear: true,
        numberOfMonths: 1,
        dateFormat: dateFormat
      })
      .on("change", function() {
        $(this).valid();
        from.datepicker("option", "maxDate", getDate(this));
      });

    function getDate(element) {
      var date;
      try {
        //date = $.datepicker.parseDate(dateFormat, element.value);
        date = Date.parse(element.value);
      } catch (error) {
        date = null;
      }

      return date.toString("yyyy-MM-dd");
    }
  });

});