JSFiddle - React, Tailwind, and code Playground

by ismett

HTML

<div class="fRow">
<div class="left">
<div class="dateMarker left"><input type="text" id="from" placeholder="Starts on" /></div>
</div>
<div class="left">
<div class="dateMarker left"><input type="text" id="to" placeholder="Ends on" /></div>
</div>
<div class="noFloat"></div>
</div>

CSS

div, .relative{
  display: block;
  position: relative;
}

div.fRow div, div.fRow label{
  padding: 5px;
}

input[type=text]{
  background-color: transparent;
  border: none;
  border: 0;
}

.left{
  float: left;
}

div.dateMarker{
  background-color: #fff;
}

div.dateMarker.activated{
  background-color: #99ede6;
}

.noFloat{
  clear: both;
}

JavaScript

$("#from").datepicker({
  changeMonth: true,
  numberOfMonths: 2,
  beforeShow: function(el){
  	$(el).val($.datepicker.formatDate('mm/dd/yy', new Date()));
    $(el).closest("div.fRow").find("div.dateMarker").removeClass("activated");
		$(el).closest("div.dateMarker").addClass("activated");
  },
  onClose: function(selectedDate) {
    $("#to").datepicker("option", "minDate", selectedDate);
    $("#to").datepicker("show");
  }
});
$("#to").datepicker({
  changeMonth: true,
  numberOfMonths: 2,
  beforeShow: function(el){
  	$(el).val($.datepicker.formatDate('mm/dd/yy', new Date()));
    $(el).closest("div.fRow").find("div.dateMarker").removeClass("activated");
		$(el).closest("div.dateMarker").addClass("activated");
  },
  onClose: function(selectedDate) {
    $("#from").datepicker("option", "maxDate", selectedDate);
  }
});