JSFiddle - React, Tailwind, and code Playground

by rigids

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <base href="http://jqueryui.com/demos/datepicker/"></base>
    <title>jQuery UI Datepicker - Display month &amp; year menus</title>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.5.1.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>

    <script src="../../ui/jquery.ui.datepicker.js"></script>
    <link rel="stylesheet" href="../demos.css">
    <script>
        var unavailableDates = ["5-7-2011","6-7-2011","7-7-2011","15-7-2011","16-7-2011","17-7-2011" ];

        
function unavailable(date) {
  dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
  if ($.inArray(dmy, unavailableDates) == -1) {
    return [true, ""];
  } else {
    return [false,"","Unavailable"];
  }
}
    $(function() {
        $( "#datepicker_1,#datepicker_2" ).datepicker({
             beforeShow: customRange,
            beforeShowDay: unavailable,
            changeMonth: true,
            changeYear: true
        });
    });
    
    function customRange(input) {
  if (input.id == 'datepicker_2') {
    return {
      minDate: jQuery('#datepicker_1').datepicker("getDate")
    };
  } else if (input.id == 'datepicker_1') {
    return {
      maxDate: jQuery('#datepicker_2').datepicker("getDate")
    };
  }
}
    </script>
</head>
<body>

<div class="demo">
 <input type="text" id="datepicker_1"></p>
 <input type="text" id="datepicker_2"></p>

</div><!-- End demo -->




</body>
</html>