<#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 \5b8b\4f53,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>百度云链接 ： 链接：https://pan.baidu.com/s/1o7PkWtk 密码：7lcv
使用jQueryUI实现点击上月下月上周下周，日期相应改变
原文地址：http://www.cnblogs.com/gaomanito/p/8004776.html