daterangepicker

by tonytlwu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.min.css">
<!-- Date and time range -->
<div class="form-group">
  <label>Date range button:</label>

  <div class="input-group-btn">
    <button type="button" class="btn btn-default" id="daterange-btn" style='width:230px'>

        <i class="fa fa-calendar"></i>&nbsp; <span>defaut date</span>

      <i class="fa fa-caret-down"></i>
    </button>
  </div>
</div>
<!-- /.form group -->

JavaScript

var start = moment().startOf('month');
var end = moment().endOf('month');
var label = '';

$('#daterange-btn').daterangepicker({
    locale: {
      format: 'DD MMM YYYY'
    },
    startDate: moment().startOf('month'),
    endDate: moment().endOf('month'),
    ranges: {
      'Today': [moment(), moment()],
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
    },
    "autoUpdateInput": false,
    "showCustomRangeLabel": false,
    "alwaysShowCalendars": true,
    "autoApply": true,
    "showDropdowns": true,
  },
  function(start, end, label) {
    if (isDate(start)) {
      $('#daterange-btn span').html(start.format('DD MMM YYYY') + ' - ' + end.format('DD MMM YYYY'));
    }
  });


function isDate(val) {
  //var d = new Date(val);
  //return !isNaN(d.valueOf());
  var d = Date.parse(val);
  console.log(d);
  return Date.parse(val);
}

function IncDecMonth(Action) {
  if (isDate(start)) {
    $('#daterange-btn span').html(start.format('DD MMM YYYY') + ' - ' + end.format('DD MMM YYYY'));
  }
}

IncDecMonth();