JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Start Date: <input type="text" id="from"></p>
<p>End Date: <input type="text" id="to"></p>
<label for="number">Select a number</label>
    <select name="number" id="number">
      <option selected="selected">15</option>
      <option>30</option>
      <option>60</option>
    </select>
<input id="btnSubmit" type="submit" value="Get Data">

JavaScript

var startValue, endValue, intervalValue, startDate, endDate, offset; 
$(document).ready(function() {

   startDate = $("#from").datepicker(
    {
        onSelect: function()
        {
             startValue = $(this).datepicker('getDate');

        }

    });

endDate = $("#to").datepicker(
    {
        onSelect: function()
        {
            endValue = $(this).datepicker('getDate');

        }
    });

intervalValue = $( "#number" )
        .selectmenu()
        .selectmenu( "menuWidget" )
        .addClass( "overflow" );

    $("#btnSubmit").click(function(){
console.log(startValue, endValue, intervalValue, startDate, endDate, offset)
    });
});