JSFiddle - React, Tailwind, and code Playground

by nithyanandam venu

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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
<div id="cont">
<div id="parentContainer">
  <div id="headerContent">
    <div class="right">
      <select id="operator">
        <option value="between">Between</option>
        <option value="after">After</option>
        <option value="before">Before</option>
        <option value="last">Last</option>
        <option value="next">Next</option>
        <option value="this">This</option>
        <option value="period">Period</option>
      </select>
    </div>
    <div class="clear"></div>
  </div>
  <div id="bodyContent">
     <div id="datetypes">
        <div id="between" class="hiddensection">
            <p >
            <span class="left">From: <input type="text" data-type="from" class="datepicker" id="fromdatepicker"></span>
           <span class="right">To: <input type="text" data-type="to" class="datepicker" id="todatepicker"></span></p>
            
        </div>
        <div class="clear"></div>
         <div id="after" class="hiddensection">
            <p><span class="left">After:</span><span class="right">
            <input type="text"class="datepicker"  data-type="after" id="afterdatepicker"></p>
        </div>
        <div class="clear"></div>
         <div id="before" class="hiddensection">
            <p>
            <span class="left">Before:</span><span class="right">
            <input type="text" class="datepicker" data-type="to" id="beforedatepicker"></p>
        </div>
        <div class="clear"></div>
       
     </div>
     <div id="filtertypes">
         <div id="last" class="hiddensection">
           <p>
           <span class="left">Last:</span><span class="right">
             <input type="text"> <select>
             <option value="day">Day(s)</option>
             <option...

CSS

#cont{
  width:800px;
}
#parentContainer{
  border:1px solid black;
}
#headerContent{
  min-height:10%;
  border:1px solid black;
}
#bodyContent{
  min-height:70%;
  border:1px solid black;
}
#footerContent{
  min-height:10%;
  border:1px solid black;
}
#operator select{
  display:block;
}
#between input{
  width:100px;
}
.clear{
  clear: both;
}
#filtertypes input{
  width:30px;
  margin-left:10px;
}
.left{
  float:left;
  margin-left:10px
}
.right{
  float:right;
  margin-right:10px;
}

JavaScript

//INIT
var currentType="between";
var outputArray=[];
var from=new Date().toString('MM/dd/yyyy');
var to=new Date().toString('MM/dd/yyyy');
var after=new Date().toString('MM/dd/yyyy');
var before=new Date().toString('MM/dd/yyyy');

 $( function() {
    $( "#fromdatepicker" ).datepicker();
    $( "#todatepicker" ).datepicker();
    $( "#afterdatepicker" ).datepicker();
    $( "#beforedatepicker" ).datepicker();
    $( "#fromdatepicker" ).val(from);     
    $( "#todatepicker" ).val(to);     
    $( "#afterdatepicker" ).val(after);     
    $( "#beforedatepicker" ).val(before);        
  } );

var initComponent=function(value){
  $('.hiddensection').hide();
  $('#'+value).show();
}



//CHANGE LISTENR
$('#operator').change(function(){
 	initComponent($(this).val());
  var type=$(this).val();
  $('#dv1').hide();
  $('#dv2').hide();
  switch(type){
  		case 'between':
       		 from=$( "#fromdatepicker" ).val();
   				 to=$( "#todatepicker" ).val();
      		 $('#dv1').show().html($( "#fromdatepicker" ).val());
           $('#dv2').show().html($( "#todatepicker" ).val());
           break;
      case 'after':
      		 after=$( "#beforedatepicker" ).val();
      		 $('#dv1').show().html($( "#beforedatepicker" ).val());
           break;
      case 'before':
      		 before=$( "#afterdatepicker" ).val();
      		 $('#dv1').show().html($( "#afterdatepicker" ).val());
           break;
//      case  'last':
//      case  'next':
//      case  'this':
//      case   'period:'
  }
  currentType=$(this).val(); 
})

$('#operator').change();

$('.datepicker').change(function(){
	  	var type=$(this).attr('data-type');
      switch(type){
      	 case 'from':
         			 $('#dv1').html($(this).val());
               break;
         case 'to':
         			 $('#dv2').html($(this).val());
               break;
         case 'after':
         				$('#dv1').html($(this).val());
                break;
         case 'before':
         				$('#dv1').html($(this).val());
              ...