年月周下拉框，周會隨月改變
阿新 • • 發佈：2017-12-08
nbsp true clas sele sheet san query asc jquery
<#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"> @CHARSET "UTF-8"; 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> <div id="" style="padding:5px;"> <select id="year"></select> <label>年</label> <select id="month"></select> <label>月</label> <select id="week"></select> <label>周</label> </div> <script type="text/javascript"> var now=moment(‘${.now}‘,‘YYYY-MM-DD HH:mm:ss‘); $(function(){ var $year=$(‘#year‘),$month=$(‘#month‘),$week=$(‘#week‘),sDate,eDate,n=now.clone().subtract(1,‘days‘),y=n.year(),m=n.month()+1,s=[]; for (var i=y; i>2015; i--) { if(i==y){ s.push(‘<option select="select">‘); } else{ s.push(‘<option>‘); } s.push(i); s.push(‘</option>‘); } $year.append(s.join(‘‘)).selectmenu({ //設置寬度需要在此設置 width:90, change:function() { var v = this.value; if(v==y){ $month.val(‘‘).empty().append(getMonth(m)).selectmenu(‘refresh‘); eDate = n.format(‘YYYYMM‘); } else { $month.val(‘‘).empty().append(getMonth(12)).selectmenu(‘refresh‘); eDate = v+‘12‘; } sDate= v+‘01‘; $week.val(‘‘).empty().append(‘<option select="select" value="">全部</option>‘).selectmenu(‘refresh‘); //查詢 } }); $month.append(getMonth(m)).selectmenu({ //設置寬度需要在此設置 width:80, change:function() { var v=this.value; if(v){ sDate=moment([$year.val(),Number(this.value)-1]).format(‘YYYYMM‘); $week.empty().append(getWeek(sDate)).selectmenu(‘refresh‘); } else { v=$year.val(); $week.val(‘‘).empty().append(‘<option select="select" value="">全部</option>‘).selectmenu(‘refresh‘); sDate = v+‘01‘; eDate = (v==y?n.format(‘YYYYMM‘):v+‘12‘); } //以下寫查詢就行了 } }); $week.append(getWeek(n.format(‘YYYYMM‘))).selectmenu({ change:function() { var v=this.value; if(v){ //去橫崗 /-/g：全局的意思，所有的橫杠 sDate =v.substring(0,10).replace(/-/g,""); eDate =v.substr(13,10).replace(/-/g,""); } else { sDate=$year.val()+$month.val(); } //以下寫查詢就行了 } }); }); function getMonth(month){ var s=[]; s.push(‘<option select="select" value="">全部</option>‘); for (var i=month; i>0; i--) { if(i==month){ s.push(‘<option select="select">‘); } else{ s.push(‘<option>‘); } s.push(i<10?‘0‘+i:i); s.push(‘</option>‘); }; return s.join(‘‘); } function getWeek(month){ var nw=now.clone(),d=moment(month+‘01‘,‘YYYYMMDD‘),sd=d.clone().startOf(‘week‘), ed= nw.format(‘YYYYMM‘) == month ? nw.clone().subtract(1,‘days‘) :d.endOf(‘month‘).endOf(‘week‘), s=[‘<option select="select" value="">全部</option>‘],t; if(!ed.isBefore(nw)){ ed=nw.subtract(1,‘days‘); } t=ed.clone(); s.push(‘<option>‘); s.push(ed.startOf(‘week‘).format(‘YYYY-MM-DD‘)); s.push(‘ - ‘); s.push(t.format(‘YYYY-MM-DD‘)); s.push(‘</option>‘); ed.subtract(1,‘days‘); for (; ed.isAfter(sd);ed.subtract(1,‘days‘)) { t=ed.clone(); s.push(‘<option>‘); s.push(ed.subtract(6,‘days‘).format(‘YYYY-MM-DD‘)); s.push(‘ - ‘); s.push(t.format(‘YYYY-MM-DD‘)); s.push(‘</option>‘); }; return s.join(‘‘); }; </script> </body> </html>
百度雲鏈接 ： 鏈接：https://pan.baidu.com/s/1o7PkWtk 密碼：7lcv
年月周下拉框，周會隨月改變