JSFiddle - React, Tailwind, and code Playground

by orolo

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/dark-hive/jquery-ui.css">
<input type="text" class="milestone-tracking-start" />cal1
<br />
<input type="text" class="milestone-tracking-end" />cal2

CSS

.ui-datepicker {
font-size: 85%; 
}
.milestone-datepicker-start {
 color: red;
  background: blue;  
  margin-top: 100px;
}
.datepicker-start {
 color: green;   
}

JavaScript

$('.milestone-tracking-start').datepicker({
    beforeShow: function(input, inst) {
        oldStartDate = $('this').val();
        inst.dpDiv.addClass('milestone-datepicker-start');
    },
    onClose: function(dateText, inst) {
        
        console.log("Title: " + $(this).parent().siblings().attr("title") + "\n" + "Old Start Date: " + oldStartDate + "\n" + "New Start Date: " + dateText + "\n");
        inst.dpDiv.removeClass('milestone-datepicker-start');

    },
    numberOfMonths: 2,
    showButtonPanel: true,
    closeText: 'X'

}).addClass('datepicker-start');

$('.milestone-tracking-end').datepicker({
    beforeShow: function(input, inst){
        inst.dpDiv.removeClass('milestone-datepicker-start');  
    }  
});