JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<!DOCTYPE html>
<html>
<head>
	<link href="../assets/styles.min.css" rel="stylesheet">
	<title>jQuery UI Datepicker: Using Datepicker to Select Date Range</title>
	<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
	<style>
		.dp-highlight .ui-state-default {
			background: #484;
			color: #FFF;
		}
	</style>
</head>
<body>
	<div id="datepicker"></div>
	<p>
		Dates:
		<input type="text" id="input1" size="10">
		<input type="text" id="input2" size="10">
	</p>
	<script>
		/*
		 * jQuery UI Datepicker: Using Datepicker to Select Date Range
		 * http://salman-w.blogspot.com/2013/01/jquery-ui-datepicker-examples.html
		 */
		$(function() {
			$("#datepicker").datepicker({
				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());
					if (!date1 || date2) {
						$("#input1").val(dateText);
						$("#input2").val("");
						$(this).datepicker("option", "minDate", dateText);
					} else {
						$("#input2").val(dateText);
						$(this).datepicker("option", "minDate", null);
					}
				}
			});
		});
	</script>
</body>
</html>