Date Range Picker

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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<input type="hidden" id="rent_from" value="2017/07/01" />
<input type="hidden" id="rent_from" value="2017/10/31" />

<div class="pull-left">
  <h1>Title</h1>
  <div id="rental-range" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 300px">
    <i class="fa fa-calendar"></i>&nbsp;
    <span></span> <b class="caret"></b>
  </div>
</div>

JavaScript

$(function() {
  if ($('#rent_from').length) { //if rent_form has value
    var start = $('#rent_from').val(); //then use its value for start & end
    var end = $('#rent_to').val();
  } else { //if not use the current time
    var start = moment();
    var end = moment().add(+3, 'M');
  }

  function cb(start, end) {
    $('#rental-range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
  }

  $('#rental-range').daterangepicker({
    "autoApply": true,
    startDate: start,
    endDate: end,
  }, cb);

  cb(start, end);

});