JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
        type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css"
      rel="Stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="date-example-container">
  <select id="selection">
    <option value="volvo"></option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
  <table id="date-table" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td id="column">
        <input type="text" id="dt1" placeholder="input" />
        <i class="fa fa-calendar" aria-hidden="true"></i>
      </td>
      <td>
        &nbsp;
      </td>
      <td id="column">
        <input type="text" id="dt2" placeholder="output" />
        <i class="fa fa-calendar" aria-hidden="true"></i>
      </td>
    </tr>
  </table>
  

  <input class="submit-here" type="submit" value="Click here for more"/>

</div>

CSS

.date-example-container{
  max-width: 390px;
  width:100%;
}

#date-table{
  margin-top: 10px;
}

#column{
  position: relative;
}

input#txtTo,
input#txtFrom{
  position: relative;
  padding: 10px;
}


input#txtFrom:after{
  font-family: fontawesome;
  content: '\f073';
  psotion: absolute;
}

.fa-calendar{
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px;
}
.submit-here{
  display: inline-block;
  background: black;
  border: 0;
  color: white;
  padding:10px;
  margin-top: 10px;
}

select{
  width: 100%;
  padding: 10px;
}

JavaScript

$(document).ready(function() {
  var txtFromDate, txtToDate;
  $("#dt1").datepicker({
			dateFormat: "dd-M-yy",
			minDate: 0,
			onSelect: function (date) {
				onSelect: function (date) {
            var dt2 = $('#dt2');
            var startDate = $(this).datepicker('getDate','+1d');
            startDate.setDate(startDate.getDate()+1); 
            dt2.datepicker('option', 'minDate', startDate);
            dt2.datepicker('setDate', startDate);
        }
		});
		$('#dt2').datepicker({
			dateFormat: "dd-M-yy",
			
		});

  $('.submit-here').click(function() {
    // var link = day_1+month_1+year;
    var date1 = $("#txtFrom").datepicker('getDate'),
        day_1  = date1.getDate(),  
        month_1 = date1.getMonth() + 1,              
        year_1 =  date1.getFullYear();
            
    var date2 = $("#txtTo").datepicker('getDate'),
        day_2  = date2.getDate(),  
        month_2 = date2.getMonth() + 1,              
        year_2 =  date2.getFullYear(); 
    
    alert(day_1 + '-' + month_1 + '-' + year_1);
    console.log(txtFromDate, txtToDate);
  });
});