HTML

<div id="reportrange" class="pull-right dateRange"
             style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
             <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> 
             <span></span> <b class="caret"></b>
             <input type="text" name="Monthlycycle" id="Monthlycycle" style="display:none">
            </div>

Js初始化部分

//調用
$(function() {
 loading_control.loading_show();
 // 初始化日歷插件
 initdaterangepicker();
});

/**
 * 初始化日歷插件
 */
var initdaterangepicker = function() {
 var start = moment().startOf('month');
    var end = moment();

 function cb(start, end) {
  $('#reportrange span').html(
    start.format('YYYY-MM-DD') + '  - -  '
      + end.format('YYYY-MM-DD'));
  startTime = start.format('YYYY-MM-DD');
  endTime = end.format('YYYY-MM-DD');
 }

 $('#reportrange').daterangepicker(
   {
    startDate : start,
    endDate : end,
    locale : {
     format : 'YYYY-MM-DD',
     separator : ' - ',
     applyLabel : '確定',
     cancelLabel : '取消',
     weekLabel : 'W',
     customRangeLabel : '選擇日期',
     fromLabel : '起始時間',
     toLabel : '結束時間',
     daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
     monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月',
       '八月', '九月', '十月', '十一月', '十二' ]
    },
    opens : 'left', // 日期選擇框的彈出位置
    ranges : {
     '今日' : [ moment(), moment() ],
     '昨日' : [ moment().subtract(1, 'days'),
       moment().subtract(1, 'days') ],
     '近七日' : [ moment().subtract(6, 'days'), moment() ],
     '近三十日' : [ moment().subtract(29, 'days'), moment() ],
     '本月' : [ moment().startOf('month'), moment() ],
     '上個月' : [ moment().subtract(1, 'month').startOf('month'),
       moment().subtract(1, 'month').endOf('month') ]
    }
   }, cb);

 cb(start, end);
}