<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <!-- Include Required Prerequisites -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />

  <!-- Include Date Range Picker -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
</head>

<body>
  <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
    <span></span> <b class="caret"></b>
  </div>

  <script type="text/javascript">
    /* global variables to store your dates ..*/
    var _FromDate;
    var _EndDate;

    $(function () {
      var _format = "YYYY-MM-DD";
      var start = moment(); // moment('@ViewBag.from_date', _format); 
      var end = moment(); //moment('@ViewBag.from_date', _format);

      /* update your display summary and your local variables... */
      function cb(start, end) {
        /* 
          storing the moment object. If case you post these values over to a server, defaulr ajax transforms into ISOstring.
          But in case it doesn't, your should  _FromDate = start.toISOString() or if u have a sppecific format start.format('{your format}') 
        */
        _FromDate = start;
        _EndDate = end;
        $('#reportrange span').html(start.format(_format) + ' - ' + end.format(_format));
      }

      $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        locale: { format: _format },
        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')]
        }
      }, cb);

      cb(start, end);

    });

  </script>
</body>

</html>
// Code goes here

/* Styles go here */