JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
<div id="datepicker"></div>

CSS

.dp-highlight .ui-state-default {
  background: #484;
  color: #FFF;
}

JavaScript

$('#from, #to').focus(function() {
	var datepicker = $('#datepicker');
  datepicker.attr('last-selected', $(this).attr('id'));
  if ($(this).attr('id') == 'from') {
  	datepicker.show();
  }
});
$('#datepicker').datepicker({
	numberOfMonths: 3,
  onSelect: function(date, inst) {
  	$('#' + $(this).attr('last-selected')).val(date);
    if ($(this).attr('last-selected') == 'to') {
    	$(this).hide();
    }
  },
  beforeShowDay: function (date) {
    var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#from").val());
    var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#to").val());
    return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
  }
}).hide();