JSFiddle - React, Tailwind, and code Playground

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...

JavaScript

var dates = $("#input-service_date_leave, #input-service_date_return").datepicker({
		    changeMonth: true,
			changeYear: true,
		    dateFormat: 'dd/mm/yy',
			maxDate: "08/10/2018",
			minDate: "31/10/2018",
		    onSelect: function (selectedDate) {
               
		        var option = this.id == "datepicker1" ? "minDate" : "maxDate",
		            instance = $(this).data("datepicker"),
		            date = $.datepicker.parseDate(
		            instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
		            selectedDate, instance.settings);
		        dates.not(this).datepicker("option", option, date);
		    }
		});