JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css">
<script src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css">
<div class="row">
<div class="col-sm-8">
    <div class="input-prepend input-group">
        <span class="add-on input-group-addon">
            <i class="fa fa-calendar"></i>
        </span>
        <input class="form-control" id="date-range-picker" name="departure_at" type="text" value="11/16/2015 - 11/21/2015">
    </div>
</div>
    </div>

JavaScript

$(document).ready(function() {
    $('#date-range-picker').daterangepicker(
      {
        locale: {
          applyLabel: "#{escape_javascript t('date_range_picker.apply')}",
          cancelLabel: "#{escape_javascript t('date_range_picker.cancel')}",
          fromLabel: "#{escape_javascript t('date_range_picker.depart_date')}",
          toLabel: "#{escape_javascript t('date_range_picker.return_date')}",
        },
          opens: 'left',
        format: 'YYYY/MM/DD',
        dateLimit: { days: 30 }
      },
      function(start, end, label) {
        console.log(start.toISOString(), end.toISOString(), label);
      }
    );
  });