JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">

<div class="date_wrapper">
  <input type="text" class="display_element" id="complete_date" value="" placeholder="(Choose date range)" />
  <input id="date1" class="invisible" value="" />
  <input id="date2" class="invisible" value="" />
</div>

CSS

body {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
}
.date_wrapper {
  position: relative;  
}

.display_element {
  min-width: 150px;
}

.invisible {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}

JavaScript

$(function() {
   var date1 = $('#date1');
   var date2 = $('#date2');
   var completeDate = $('#complete_date');

   date1.datepicker({
     defaultDate: "+1w",
     changeMonth: true,
     numberOfMonths: 1,
     onClose: function(selectedDate) {
       var date = $(this).datepicker("getDate");
       var formattedDate = $.datepicker.formatDate('mm/dd/yy', date);
       completeDate.val(formattedDate);
       date2.datepicker("setDate", date);
       date2.datepicker("show");


     }
   });
   date2.datepicker({
     defaultDate: "+1w",
     changeMonth: true,
     numberOfMonths: 1,
     onClose: function(selectedDate) {
       var date = $(this).datepicker("getDate");
       var formattedDate = $.datepicker.formatDate('mm/dd/yy', date);
       completeDate.val(completeDate.val() + ' - ' + formattedDate);
     }
   });

   $('#complete_date').on('click', function() {
     date1.datepicker("show");
     // date2.datepicker("show");
   })
 });