JSFiddle - React, Tailwind, and code Playground

by TDG

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css">
<script src="https://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<input class="form-control input-lg" id="tripOne" name="tripOne" />
<input class="form-control input-lg" id="tripTwo" name="tripTwo" />
<input class="form-control input-lg" id="tripThree" name="tripThree" />

JavaScript

var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var maxLimitDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate()+360, 0, 0, 0, 0);

$('input[name="tripOne"]').daterangepicker({
	"autoApply": true,
	"autoUpdateInput": false,
	"singleDatePicker": true,
	"minDate": today,
	"maxDate": maxLimitDate,
	"locale": {
	    format: 'DD MMM YYYY'
	}
	},function(start) {
	  $("#tripOne").val(start.format('DD MMM YYYY'));
	  $('#tripOne').parent().parent().removeClass('has-error');
	  var returnTripStartDate = new Date(Date.parse(start));
	  $('input[name="tripTwo"]').daterangepicker({
	    "autoApply": true,
	    "autoUpdateInput": false,
	    "singleDatePicker": true,
	    "minDate": returnTripStartDate,
	    "maxDate": maxLimitDate,
	    "locale": {
	        format: 'DD MMM YYYY'
	    }
	  },function(start) {
	        $("#tripTwo").val(start.format('DD MMM YYYY'));
	        $('#tripTwo').parent().parent().removeClass('has-error');
			var returnTripStartDate2 = new Date(Date.parse(start));
			$('input[name="tripThree"]').daterangepicker({
			"autoApply": true,
			"autoUpdateInput": false,
			"singleDatePicker": true,
			"minDate": returnTripStartDate2,
			"maxDate": maxLimitDate,
			"locale": {
			    format: 'DD MMM YYYY'
			}
			},function(end) {
			    $("#tripThree").val(end.format('DD MMM YYYY'));
			    $('#tripThree').parent().parent().removeClass('has-error');
			});
			$(function() {
				$('.calendar.right').show();
			});
	  });
	  $(function() {
	    $('.calendar.right').show();
	  });
	  $('input[name="tripOne"]').on('apply.daterangepicker', function(ev, picker) {
	    $(this).val(picker.startDate.format('DD MMM YYYY'));
	  });
	  $('input[name="tripTwo"]').on('apply.daterangepicker', function(ev, picker) {
	    $(this).val(picker.startDate.format('DD MMM YYYY'));
	  });
	  $('input[name="tripThree"]').on('apply.daterangepicker', function(ev, picker) {
	   ...