JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<input type="text" id="txtFrom" />

<input type="text" id="txtTo" />

CSS

.form {
  width: 960px;
  margin: 120px auto;
}

.form input {
  width: 250px;
  padding: 10px;
}

.ui-highlight .ui-state-default {
  background: red !important;
  border-color: red !important;
  color: white !important;
  cursor: no-drop;
}

.ui-bos .ui-state-default {
  background: green !important;
  border-color: green !important;
  color: white !important;
}

.ui-ss .ui-state-default {
  background: yellow !important;
  border-color: yellow !important;
  color: gray !important;
  cursor: help;
}

.ui-ss-donus .ui-state-default {
  background: yellow !important;
  border-color: yellow !important;
  color: gray !important;
  cursor: help;
}

.ui-highlight-donus .ui-state-default {
  background: red !important;
  border-color: red !important;
  color: white !important;
}

.ui-datepicker-highlight:after {
    background: #51c197;
}

JavaScript

$(function () {
    $("#txtFrom").datepicker({      
       onSelect: function(selectedDate) {
            //$("#cal4").datepicker("setDate", selectedDate);
            var date = $(this).datepicker("getDate"); 
            date.setDate(date.getDate() + 30);
            $("#txtTo").datepicker("setDate", date);
            $("#txtTo").datepicker("option", "minDate", selectedDate);
            $("#txtTo").datepicker("option", "maxDate", date);
            
            beforeShowDay: function(date) {
            var highlight = false,
  
            classes = 'ui-datepicker-highlight'
            }
        }
    });
    
    
  $("#txtTo").datepicker({
   changeMonth: true,
   changeYear: true
  })  
    
});