JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<form action="">
  <label class="fa fa-calendar">
        <input id="startDate" name="start_at" placeholder=" " class="data-charts" type="text" value="">
  </label>
  <label class="fa fa-calendar">
        <input id="endDate" name="end_at" placeholder=" " class="data-charts" type="text" value="">
  </label>
  
  <input id="testardatas" type="button" value="Testar" />
</form>

JavaScript

$(document).ready(function() {
	
	$("#startDate").datepicker().datepicker("setDate", "-7", new Date());
	$("#endDate").datepicker().datepicker("setDate", new Date());

	$("#startDate").datepicker({
		numberOfMonths: 1,
		onSelect: function(selected) {
			$("#endDate").datepicker("option","minDate", selected)
		}
	});
	$("#endDate").datepicker({ 
		numberOfMonths: 1,
		onSelect: function(selected) {
			 $("#startDate").datepicker("option","maxDate", selected)
		}
	});
  
  $('#testardatas').click(function () {
  	var dataIni = new Date($('#startDate').val());
		var dataFim = new Date($('#endDate').val());
		var diferencaEmMili = Math.abs(dataFim.getTime() - dataIni.getTime());
		var diferencaEmDias = Math.ceil(diferencaEmMili / (1000 * 3600 * 24)); 
		if(diferencaEmDias > 30){ alert('passou um mês'); }
  
  });

});