JSFiddle - React, Tailwind, and code Playground

by Rapha Souza

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script>
<link rel="stylesheet" href="//longbill.github.io/jquery-date-range-picker/dist/daterangepicker.min.css">
<script src="//longbill.github.io/jquery-date-range-picker/dist/jquery.daterangepicker.min.js"></script>
<div class="datas-input">
  <div class="col-md-3 col-xs-6 col-sm-6">
    <label>Entrada</label>
   
      <input type="text" class="input-text datepicker-wrap2 full-width form-control" id="dataentrada" autocomplete="off"  />
   
  </div>

  <div class="col-md-3 col-xs-6 col-sm-6">
    <label>Saida</label>
    <div class="datepicker-wrap2">
      <input type="text" class="input-text datepicker-wrap2 full-width form-control" id="datasaida" autocomplete="off" />
    </div>
  </div>
  <input type="button" id="botao" value="Botao" onclick="chamar();">
</div>
<script>
function chamar(){

//Tratar Entrada
    var dateentrada = document.getElementById("dataentrada").value;
    alert("date Entrada " +dateentrada);
    
var newdate = dateentrada.split("/").reverse().join("-");
alert("New Data Entrada"+newdate); // Date:>> "2013-05-03"

//Tratar Saida
    var datesaida = document.getElementById("datasaida").value;
    alert("date Saida " +datesaida);
    
var newdates = datesaida.split("/").reverse().join("-");
alert("New date Saida "+newdates); 


var dat1 = newdate;
alert("Data 1 " + dat1);
var date1 = new Date(dat1);

var dat2 = newdates;
var date2 = new Date(dat2);

var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));...

JavaScript

$('#dataentrada').dateRangePicker({
  autoClose: true,
  format: 'DD/MM/YYYY',
  separator: ' até ',
  minDays: 5,
  maxDays: 30,
  startDate: moment(),
  selectForward: true,
  language: 'pt',
  getValue: function() {
    if ($('#dataentrada').val() && $('#datasaida').val())
      return $('#dataentrada').val() + ' até ' + $('#datasaida').val();
    else
      return '';
  },
  setValue: function(s, s1, s2) {
    $('#dataentrada').val(s1);
    $('#datasaida').val(s2);
  }
});
/*$('#datasaida').dateRangePicker({
    autoClose: true,
    format: 'DD/MM/YYYY',
    separator: ' até ',
    // minDays: 1,
    startDate: '05/06/2017',
    selectForward: true,
    getValue: function()
    {
        if ($('#dataentrada').val() && $('#datasaida').val() )
            return $('#dataentrada').val() + ' até ' + $('#datasaida').val();
        else
            return '';
    },
    setValue: function(s,s1,s2)
    {
        $('#dataentrada').val(s1);
        $('#datasaida').val(s2);
    }
});*/