JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

HTML

<dl>
                                <dt><label for="input-service_date_leave">Leaving</label></dt>
                                <dd>
                                    <input type="text" data-default="Leaving date" name="input-service_date_leave" id="input-service_date_leave" class="text date required" />                                    
                                </dd>
            
                                <dt><label for="input-service_date_return">Returning</label></dt>
                                <dd>
                                    <input type="text" data-default="Return data (optional)" name="input-service_date_return" id="input-service_date_return" class="text date" />
                                </dd>
                            </dl>

CSS

.ui-datepicker {
    display:none;
    width:230px;
    background:#fff; padding:15px 25px; border-radius:4px; 
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5);
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5);
    box-shadow: 0px 0px 5px rgba(0,0,0,.5);
}

.ui-datepicker-header {width:auto; text-align:center; height:35px;}
.ui-datepicker-header .ui-state-disabled {visibility:hidden;}
.ui-datepicker-header a.ui-datepicker-prev {float:left; padding:6px 8px; border:1px solid #d7eef9; border-radius:4px; color:#65b8dd;}
.ui-datepicker-header a:hover.ui-datepicker-prev {text-decoration:none;}
.ui-datepicker-header a.ui-datepicker-next {float:right; padding:6px 8px; border:1px solid #d7eef9; border-radius:4px; color:#65b8dd;}
.ui-datepicker-header a:hover.ui-datepicker-next {text-decoration:none;}
.ui-datepicker-header .ui-datepicker-title {display:inline; font-weight:bold; position:relative; top:7px;}

.ui-datepicker-calendar {clear:both; border-collapse: collapse;}
.ui-datepicker-calendar th {width:30px; height:30px; background:#27aae1; border:1px solid #27aae1; color:#fff; font-weight:normal;}
.ui-datepicker-calendar td {width:30px; height:30px; border:1px solid #27aae1; text-align:center; padding:0;}
.ui-datepicker-calendar span {display:block; height:23px; width:100%; padding-top:7px;}
.ui-datepicker-calendar a {display:block; height:23px; padding-top:7px; color:#303030;}
.ui-datepicker-calendar a:hover {text-decoration:none;}
.ui-datepicker-calendar a.ui-state-hover {background-color:#88cded;}
.ui-datepicker-calendar a.ui-state-active {background-color:#39ace1; font-weight:bold;}



.ui-datepicker-calendar .highlight {background-color: #b0d7ed !important;}


.ui-datepicker-calendar td.ui-datepicker-today {}
.ui-datepicker-calendar td.ui-datepicker-today span {border:1px solid #303030 !important;  height:21px;}
.ui-datepicker-calendar td.ui-state-disabled {color:#909090;}
.ui-datepicker-other-month {background-color:#d7eef9;}

JavaScript

$("#input-service_date_leave, #input-service_date_return").datepicker({
        rangeSelect: true,
        beforeShow: customRange,
        onSelect: customRange,
    });

    function customRange(input) {
        if (input.id == "input-service_date_leave") {

            $("#ui-datepicker-div td").die();

            if (selectedDate != null) {
                $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
            }
        }
        if (input.id == "input-service_date_return") {

            $("#ui-datepicker-div td").on({
                mouseenter: function() {
                    $(this).parent().addClass("finalRow");
                    $(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight");
                    $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
               },
                mouseleave: function() {
                    $(this).parent().removeClass("finalRow");
                    $("#ui-datepicker-div td").removeClass("highlight");
                }
            });

            var selectedDate = $("#input-service_date_leave").datepicker("getDate");                
            if (selectedDate != null) {
                $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
            }
        }
    }