使用jQueryUI實現點擊上月下月上周下周，日期相應改變
阿新 • • 發佈：2017-12-08
osi trac lec ats moment light isa 星期四 http
<#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實現點擊上月下月上周下周，日期相應改變