JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<p>
            Dates:
              <label><b>To:</b></label>
            <input type="text" id="input1" size="10">
                <label><b>From:</b></label>
            <input type="text" id="input2" size="10">
          </p>
          <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

$(".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();
				}
			}
		});