您的位置:首页 > Web前端 > JavaScript

js 写 select 对应年的 自然周-日期 动态下拉列

2017-08-25 16:56 176 查看
1  a.jsp

        <select name="weekSelect" id="weekSelect" style="width: 200px;"></select>

2   a.js

     if($.isEmpty($("#weekSelect").val())){

                initWeek();

      }

     function initWeek(){

        var year = '2017';

        var text = year + '/01/01';        /* text
= '2017/01/01' */

        var ymd = year + "-01-01";      /*
ymd = '2017-01-01' */

        var week = new Date(Date.parse(text));   
/* week = 'Sun Jan 01 2017 00:00:00 GMT+0800' */

        var w = week.toString().substring(0, 3);     /*
w = 'Sun' ,即该年的1月1号为周日,则2017年第一周为1月1号*/

        var dd = 1;

        switch (w) {            /* 周一为0 ,周末对应为6*/

            case "Mon": dd = 0; break; 

            case "Tue": dd = 1; break;

            case "Wed": dd = 2; break;

            case "Thu": dd = 3; break;

            case "Fri": dd = 4; break;

            case "Sat": dd = 5; break;

            case "Sun": dd = 6; break;

        }

        var day = 1;

        if(((year%4==0)&&(year%100!=0))||(year%400==0)){    
/* 判断为如年为366天 */

            day = 366;

        }else {

            day = 365;

        }

        var aw = 53;  /* 一年有53周 */

        $("#weekSelect").empty();  /* 置空下拉列表 */

         /*循环每个周的日期区间 */

        for(var i = 0; i < 53; i++){

            var start = i * 7 + 1 - dd;  /* 每周的第一天*/

            var end = i * 7 + 7 - dd;  /* 每周的最后一天*/

            if(start < 1){

                start = 1;     /* 第一周为1月1号,
即2017年第1天*/

            }

            if(end > day){

                end = day;  /* 最后一周为12月31号,即2017年第365/366天,*/

            }

            /* 2017年1月开始第start天
对应的beginMonth 月份(+1是因为月份为1-11)*/                                                             var beginMonth = new Date(year, 0, start).getMonth()
+ 1 ;

            
/* 2017年1月开始第start天 对应的beginDay号*/  
      

            var beginDay= new Date(year, 0, start).getDate();

           
/* 2017年1月开始第end天 对应的endMonth
月份*/  
      

            var endMonth = new Date(year, 0, end).getMonth() + 1 ;

           
/* 2017年1月开始第end天 对应的endDay号*/      

            var endDay= new Date(year, 0, end).getDate();

            var str = ("第" + (i + 1) + "周 <" + beginMonth + "月" + beginDay + "号—" + endMonth + "月" + endDay  + "号>").toString();

            $("#weekSelect").append("<option value = '第" + (i + 1)+"周,"+ beginMonth+ "/" + beginDay + "-" + endMonth+ "/" + endDay + "'>" + str + "</option>");

        }

         $('#weekSelect')[0].selectedIndex = 0;

         var itme = $("#weekSelect").find("option:selected").text();

         $("#weekSelect:text").val(itme.toString());    

    }

  

3  jsp效果图

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: