码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-12-08 14:16:54      阅读:246      评论:0      收藏:0      [点我收藏+]

标签:html   .com   body   empty   ack   change   ret   UI   pat   

<#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

  

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

标签:html   .com   body   empty   ack   change   ret   UI   pat   

原文地址:http://www.cnblogs.com/gaomanito/p/8004714.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!