JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<form>
    <input name="default" type="date" required="required" /><br />
    <input name="maxDate" type="date" required="required"/>
</form>

CSS

input:required {
    box-shadow:none;
}
input:invalid {
    box-shadow:0 0 3px red;
}

JavaScript

$('input[name="default"]').datepicker({
    dateFormat: "yy-mm-dd"
});

$('input[name="maxDate"]').datepicker({
    defaultDate: +7,
    dateFormat: "yy-mm-dd"
});
$('input[name="maxDate"]' ).datepicker( "option", "maxDate", 0 );