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初始化部分
//調(diào)用
$(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 : '起始時(shí)間',
toLabel : '結(jié)束時(shí)間',
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() ],
'上個(gè)月' : [ moment().subtract(1, 'month').startOf('month'),
moment().subtract(1, 'month').endOf('month') ]
}
}, cb);
cb(start, end);
}
