<#assign basePath=request.contextPath />
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${basePath}/static/libs/jquery-ui/jquery-ui.min.css">
<style type="text/css">
.stats-input{margin:0;padding:5px 10px;position:relative;top:2px;}
.dt-buttons{margin-left:5px}
body,button,input,select,textarea{font:14px 5b8b4f53,arial,sans-serif;}
</style>
<script type="text/javascript" src="${basePath}/static/libs/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="${basePath}/static/libs/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="${basePath}/static/libs/moment/moment.min.js"></script>
</head>
<body>
<fieldset>
<label>开始时间: </label>
<input class="ui-widget ui-widget-content ui-corner-all stats-input" id="startDate" name="startDate">
<input id="sDateVal" type="hidden">
<label>结束时间: </label>
<input class="ui-widget ui-widget-content ui-corner-all stats-input" id="endDate" name="endDate">
<input id="eDateVal" type="hidden">
<button id="upMonth" type="button">上月</button>
<button id="downMonth" type="button">下月</button>
<button id="upWeek" type="button">上周</button>
<button id="downWeek" type="button">下周</button>
</fieldset>
<script type="text/javascript">
//获取服务器当前时间
var now=moment('${.now}','YYYY-MM-DD HH:mm:ss');
$(function(){
var $startDate = $('#startDate'),$endDate = $('#endDate'),formater='YYYY-MM-DD',n=now.clone().subtract(1,'days'),y=n.year(),m=n.month()+1;
$.datepicker.setDefaults({
clearText: '清除',
closeText: '关闭',
prevText: '上月',
nextText: '下月',
currentText: '今天',
monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'],
monthNamesShort: ['一','二','三','四','五','六', '七','八','九','十','十一','十二'],
weekHeader: '周',
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
dateFormat: 'yy-mm-dd',
altFormat:'yymmdd',
firstDay: 1,
changeYear: true,
changeMonth: true,
showOtherMonths: true,
selectOtherMonths: true,
showMonthAfterYear: true,
autoSize: true,
hideIfNoPrevNext: true,
yearRange:'2016:'+y,
maxDate: n.toDate()
});
//开始日期
$startDate.datepicker({
altField:'#sDateVal',
onSelect: function(startDate) {
var endDate = $endDate.datepicker('getDate');
$endDate.datepicker("option", "minDate", startDate);
}
});
//结束日期
$endDate.datepicker({
altField:'#eDateVal',
onSelect: function(endDate) {
var startDate = $startDate.datepicker("getDate");
$startDate.datepicker("option", "maxDate", endDate);
}
});
// 设置日期初始值
$startDate.datepicker('setDate', n.format('YYYY-MM-DD'));
$endDate.datepicker('setDate',n.format('YYYY-MM-DD'));
//上月按钮点击事件
$('#upMonth').button().click(function() {
var start = $startDate.datepicker('getDate'), date = start ? moment(start, formater) : n.clone(),
e=date.startOf('month').subtract(1, 'days').format(formater),s=date.startOf('month').format(formater);
$startDate.datepicker("option", "maxDate", e).datepicker('setDate',s);
$endDate.datepicker("option", "minDate", s).datepicker('setDate',e);
});
// 下月按钮点击事件
$('#downMonth').button().click(function() {
var end = $endDate.datepicker('getDate'), date = end ? moment(end, formater) : n.clone(),s,e;
if (date.endOf('month').add(1, 'days').isAfter(n)) {
return;
}
s=date.format(formater);
e=date.endOf('month').format(formater);
$startDate.datepicker("option", "maxDate", e).datepicker('setDate',s);
$endDate.datepicker("option", "minDate", s).datepicker('setDate',e);
});
// 上周按钮点击事件
$('#upWeek').button().click(function() {
var start = $endDate.datepicker('getDate'), date = start ? moment(start, formater) : n.clone(),
e=date.startOf('week').subtract(1, 'days').format(formater),s=date.startOf('week').format(formater);
$startDate.datepicker("option", "maxDate", e).datepicker('setDate',s);
$endDate.datepicker("option", "minDate", s).datepicker('setDate',e);
});
// 下周按钮点击事件
$('#downWeek').button().click(function() {
var end = $endDate.datepicker('getDate'), date = end ? moment(end, formater) : n.clone();
if (date.endOf('week').add(1, 'days').isAfter(n)) {
return;
}
s=date.format(formater);
e=date.endOf('week').format(formater);
$startDate.datepicker("option", "maxDate", e).datepicker('setDate',s);
$endDate.datepicker("option", "minDate", s).datepicker('setDate',e);
});
});
</script>
</body>
</html>