JSFiddle - React, Tailwind, and code Playground

HTML

<div class="datepicker"></div>
<div class="datepicker"></div>

CSS

.dp-highlight .ui-state-default {
    background: #484;
    color: #FFF;
}
.ui-datepicker.ui-datepicker-multi {
    width: 100% !important;
}
.ui-datepicker-multi .ui-datepicker-group {
    float:none;
}
#datepicker {
    height: 300px;
    overflow-x: scroll;
}
.ui-widget {
    font-size: 100%
}

JavaScript

/*
answer to the question from: http://stackoverflow.com/questions/16092288/date-range-picker-on-jquery-ui-datepicker

I dont own the original code, I only intend to make it into a plugin for easier use.

original code belongs to mcestone (on StackOverflow) with fix made by Jamie Layne (on StackOverflow) and can be found below:

$(".datepicker").datepicker({
	minDate: 0,
	numberOfMonths: [3,1],
	beforeShowDay: function(date) {
		var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
		var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
		return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
	},
	onSelect: function(dateText, inst) {
		var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
		var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
		var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);

		
		if (!date1 || date2) {
			$("#input1").val(dateText);
			$("#input2").val("");
			$(this).datepicker();
		} else if( selectedDate < date1 ) {
			$("#input2").val( $("#input1").val() );
			$("#input1").val( dateText );
			$(this).datepicker();
		} else {
			$("#input2").val(dateText);
			$(this).datepicker();
		}
	}
});

This code has some limitations:
    - you cant unselect a date or a range
    - you depend of 2 textboxes with fixed id's
    - in consequence of the previous point, you can only have one range selector PER PAGE
    - you have to use always the default format: mm/dd/yy
    - there is no room for customization and defining your own settings
        o you can change de defaults, but i find it an horrible idea (NEVER MESS WITH DEFAULTS).

=========================================================================

List do to:
X allow selection of only 1 day
    x make it configurable
- add serialize...