JSFiddle - React, Tailwind, and code Playground

by Riccal

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>
                
                <div id="naim"></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 day  = date.getDate();  
					var month = date.getMonth() + 1;              
					var year =  date.getFullYear();		
		
                    var datefull = day+'-'+month+'-'+year;
                    var gelenval = $('#ss'+day+''+month+''+year).val();
                    
				    var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
			    	var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val()); 
            
                    if( datefull != gelenval && date1 && ((date2 && date >= date1 && date <= date2 ))){            
 	                   $('#naim').append('<div style="float: left;margin-left: 15px"><input  type="text"  id="ss'+day+''+month+''+year+'"  name="date_range[]" value="'+day+'-'+month+'-'+year+'" readonly /> </div>');
                     }
                
				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);
                   ...