JSFiddle - React, Tailwind, and code Playground

by kalinin sergey

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <div class="action-area">
            <p>Date begin: <input type="text" id="datepickerBegin"></p>
            <p>Date end: <input type="text" id="datepickerEnd"></p>
            <p><button class="btn btn-submit" onclick="displayStatistic()">Выбрать</button></p>
        </div>

        <div class="statistic-area">
            <div class="statistic-table-wrap" id="statisticTableWrap"></div>
        </div>
        
        
<script>
  $(function() {
    $("#datepickerBegin, #datepickerEnd").datepicker({
      dateFormat: "yy-mm-dd",
      firstDay: 1
    });
  });

  function getUnixDatesObj() {
    //console.log('getUnixDatesObj');

    var dateBegin = $('#datepickerBegin').val(), 
      dateEnd = $('#datepickerEnd').val();

    if(!dateBegin || !dateEnd) {
      alert('Необходимо выбрать диапазон дат');
      return;
    }

    var yearBegin = dateBegin.split('-')[0],
      monthBegin = +dateBegin.split('-')[1] - 1,
      dayBegin = dateBegin.split('-')[2]

    if(monthBegin < 10)  { monthBegin = '0' + monthBegin }

    var yearEnd = dateEnd.split('-')[0],
      monthEnd = +dateEnd.split('-')[1] - 1,
      dayEnd = dateEnd.split('-')[2]

    if(monthEnd < 10)  { monthEnd = '0' + monthEnd }

    // преобразуем в js-формат
    var dateBeginObj = new Date(yearBegin, monthBegin, dayBegin);
    var dateEndObj = new Date(yearEnd, monthEnd, dayEnd);

    // преобразуем в unix-формат
    var dateBeginUnix = dateBeginObj.getTime() / 1000;
    var dateEndUnix = dateEndObj.getTime() / 1000;

    return {
      'dateBeginUnix': dateBeginUnix,
      'dateEndUnix': dateEndUnix
    }
  };

  function constructTable(statistic) {
    var tableBodyElem;

    statistic.forEach(function(item) {
      if(item) {
        tableBodyElem += '<tr>'; 
        tableBodyElem += '<td>' + item.fields.created_date.split('T')[0] +...

CSS

.action-area{
	background: orange;
	height: 20%;
}

.statistic-area{
	background: yellow;
	height: 80%;
}

.statistic-table{
	background: cyan;
	text-align: center;
}

	.statistic-table tr{
		font-weight: bold;
	}

	.statistic-table td{
		padding: 10px 20px;
		border: 1px solid #000;
	}