JSFiddle - React, Tailwind, and code Playground

by sebababi

HTML

<input type="text" class="datepicker"id="input1" size="10">
            <input type="text" class="datepicker"id="input2" size="10">

          <div ></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: [2,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());
				if (!date1 || date2) {
					$("#input2").val(dateText);
					
                    // $(this).datepicker();
				} else {
					$("#input2").val(dateText);
                    // $(this).datepicker();
				}
			}
		});