JSFiddle - React, Tailwind, and code Playground

by Rapha Souza

HTML

<script src="https://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css">
<script src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css">
<input type="text" name="daterange" class="form-control"  />
<label>De</label>
<input type="text" name="de" class="form-control"  />
<label>Até</label>
<input type="text" name="ate" class="form-control"  />

JavaScript

$(function() {
  $('input[name="daterange"]').daterangepicker({

    "locale": {
        "format": "DD/MM/YYYY",
        "separator": " - ",
        "applyLabel": "Aplicar",
        "cancelLabel": "Cancelar",
        "fromLabel": "De",
        "toLabel": "Ate",
        "customRangeLabel": "Custom",
        "weekLabel": "W",
        "daysOfWeek": [
            "Dom",
            "Seg",
            "Ter",
            "Qua",
            "Qui",
            "Sex",
            "Sab"
        ],
        "monthNames": [
            "Janeiro",
            "Fevereiro",
            "Março",
            "Abril",
            "Maio",
            "Junho",
            "Julho",
            "Agosto",
            "Setembro",
            "Outubro",
            "Novembro",
            "Dezembro"
        ],
       
    },
    
   
  }, function(start, end, label) {
  

    alert("A new date selection was made: " + start.format('DD-MM-YYYY') + ' to ' + end.format('DD-MM-YYYY'));
    
      var inicio = start.format('DD-MM-YYYY');
  var fim = parseint(end.format('DD-MM-YYYY'));
   document.getElementById("de").value = inicio;
  document.getElementById("ate").value = fim;
    
    
  });
});