JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<div class="date_wrapper">
  <span id="complete_date" style="width:100px;">(Choose date range)</span>
  <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;  
}

#complete_date {
  display: inline-block;
  border: 1px solid #777;
  width: auto;
  min-width: 150px;
  padding: 2px;
}

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

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.text(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.append(' - ' + formattedDate);
     }
   });

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