年月周下拉框，周会随月改变 

<#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/1mjqcFWG 密码：8979

　　

posted @ 2017-12-08 11:46  高木子  阅读(779)  评论(0)  编辑  收藏  举报