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
$(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(){
});
});