JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" class="getTimeFeed">Open Dialog</button>
<div id="filterPopUp" class="filterPopUp" title="Custom Time">
    <div class="col-sm-3 no-padding">
        <label class="control-label col-sm-6 col-xs-12" for="createdFromDate">Start Date:</label>
        <div class="col-xs-5 col-md-6 no-padding input-max controls">
            <input type="text" class="form-control  input-sm" name="createdFromDate" id="createdFromDate">
        </div>
    </div>
    <div class="col-sm-3 no-padding">
        <label class="control-label col-sm-6 col-xs-12" for="createdToDate">End Date:</label>
        <div class="col-xs-5 col-md-6 no-padding input-max controls">
            <input type="text" class="form-control  input-sm" name="createdToDate" id="createdToDate">
        </div>
    </div>
   
</div>

JavaScript

$("#filterPopUp").dialog({
    autoOpen: false,
    modal: true,
    height: 'auto',
    width: '70%'
});
$("#filterPopUp").on("dialogopen", function (event, ui) {
    $("#createdFromDate").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        changeYear: true,
        onClose: function (selectedDate) {
            $("#createdToDate").datepicker(
                "option", "minDate", selectedDate);
        }
    });
    $("#createdToDate").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        changeYear: true,
        onClose: function (selectedDate) {
            $("#createdFromDate").datepicker("option", "maxDate", selectedDate);
        }
    });

});
$(document).on('click', ".getTimeFeed",
  function() {
    $('#filterPopUp').dialog("open");
  }
);