html 年-月-周 筛选视图

效果:

20180420095622973.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>
    <div style="float: left;">
        时间周期
        <select id="changeMonthOrWeek" name="changeMonthOrWeek" class="" style="padding-left: 10px; ">
            <option value="1">月</option>
            <option value="2">周</option>
        </select>:
        <select id="startYear" class="year-crm"></select>
        <select id="startMonth" class=" month-crm"></select>
    </div>
    <div id="changeMonthDiv" style="float: left;">
        <span style="padding: 0px 10px">至</span>
        <select id="endYear" class="year-crm"></select>
        <select id="endMonth" class="month-crm"></select>
    </div>
    <div id="changeWeekDiv" style="display: none;">
        <select id="startEndDay" class="week-crm"></select>
    </div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script>
    //展示周
    function weekShow(id,df,dv) {
        $(id).html("");
        $(id).append("<option value=''>--------------周--------------</option>");
        if(df){
            var data = weekCount(dv)
            for(var i =0;i<data.length;i++){
                var v = data[i].timesStart+"~"+data[i].timesEnd;
                $(id).append("<option value='"+v+"'>"+v+"</option>");
            }
        }
    }
    weekShow("#startEndDay",true);
    $("#changeMonthOrWeek").change(function () {
       var val = this.value;
       if(val==1){
           $("#changeWeekDiv").hide();
           $("#changeMonthDiv").show();
           monthShow(".month-crm");
           yearsShow(".year-crm",2014);
       }
        if(val==2){
            $("#changeWeekDiv").show();
            $("#changeMonthDiv").hide();
            monthShow("#startMonth");
            yearsShow("#startYear",2014);
            weekShow("#startEndDay");
        }
    });
    //周视图改变的时候
    $("#startYear").change(function () {
        var val = $("#changeMonthOrWeek").val();
        var startMonth = $("#startMonth").val();
        if(val==2&&startMonth!=""){
            weekShow("#startEndDay",true,this.value+"-"+startMonth);
        }
    });
    //周视图改变的时候
    $("#startMonth").change(function () {
        var val = $("#changeMonthOrWeek").val();
        var startYear = $("#startYear").val();
        if(val==2&&startYear!=""){
            weekShow("#startEndDay",true,startYear+"-"+this.value);
        }
    });
    //一个月的周区间
    function weekCount(df) {
        var date=new Date;
        if(df){
            date = new Date(df);
        }
        var dateTemp = date;
        dateTemp.setDate(1);
        var intWeek = dateTemp.getDay();
        var dateStartDay,dateEndDay;
        var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
        // console.log(lastDay)
        var timesStart,timesEnd;
        var arr = [];
        dateStartDay = new Date(dateTemp);
        dateStartDay.setDate(dateStartDay.getDate()-(intWeek-1==-1?6:intWeek-1));
        timesStart = dateStartDay.getFullYear()+"-"+dateToolAddZero(dateStartDay.getMonth()+1)+"-"+dateToolAddZero(dateStartDay.getDate());
        dateEndDay = new Date(timesStart);
        dateEndDay.setDate(dateEndDay.getDate()+6);
        timesEnd = dateEndDay.getFullYear()+"-"+dateToolAddZero(dateEndDay.getMonth()+1)+"-"+dateToolAddZero(dateEndDay.getDate());
        arr.push({"timesStart":timesStart,"timesEnd":timesEnd});
        var loop = true;
        var index = 1;
        while (loop){
            var dateStartDay2 = new Date(timesEnd);
            dateStartDay2.setDate(dateStartDay2.getDate()+1);
            var timesStart = dateStartDay2.getFullYear()+"-"+dateToolAddZero(dateStartDay2.getMonth()+1)+"-"+dateToolAddZero(dateStartDay2.getDate());
            var dateEndDay2 = new Date(timesStart);
            dateEndDay2.setDate(dateEndDay2.getDate()+6);
            timesEnd = dateEndDay2.getFullYear()+"-"+dateToolAddZero(dateEndDay2.getMonth()+1)+"-"+dateToolAddZero(dateEndDay2.getDate());
            if(lastDay.getDay()==0){
                var tempDate = new Date(timesEnd);
                tempDate = new Date(dateStartDay2.getFullYear(), dateStartDay2.getMonth());
                if(tempDate>=lastDay){
                    loop=false;
                    break;
                }
            }else {
                var tempDate = new Date(timesEnd);
                tempDate = new Date(dateStartDay2.getFullYear(), dateStartDay2.getMonth());
                if(tempDate>lastDay){
                    loop=false;
                    break;
                }
            }
            arr.push({"timesStart":timesStart,"timesEnd":timesEnd});
            index++;
            if(index>10){
                loop=false;
                break;
            }
        }
        // console.log(arr);
        return arr;
    }
    function dateToolAddZero(num){
        return num<10?'0'+num:num;
    }
    // weekCount('2008-2');
    // weekCount('2018-1');
    // weekCount('2018-4');
    // weekCount('2017-12');
    // weekCount('2018-12');
    // weekCount('2019-1');
    //年份展示
    function yearsShow(id,time,df) {
        $(id).html("");
        $(id).append("<option value=''>--年--</option>");
        var date=new Date;
        var year=date.getFullYear();
        var month=date.getMonth()+1;
        var len = 0;
        if(time){
            len = time;
        }
        for (var i=year;i>=len;i--){
            $(id).append("<option value='"+i+"'>"+i+"</option>");
        }
        if(df){
            $(id).val(year)
        }
    }
    //月份展示
    function monthShow(id,df) {
        $(id).html("");
        $(id).append("<option value=''>--月--</option>");
        var date=new Date;
        var month=date.getMonth()+1;
        for (var i=1;i<=12;i++){
            var v = i<10?('0'+i):i;
            $(id).append("<option value='"+v+"'>"+i+"</option>");
        }
        if(df){
            $(id).val(month<10?('0'+month):month);
        }
    }
    monthShow(".month-crm",true);
    yearsShow(".year-crm",2014,true);
</script>
</html>

版权声明:
作者:超级管理员
链接: https://apecloud.ltd/article/detail.html?id=103
来源:猿码云个人技术站
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
/static/admin/img/weixin.jpg/static/admin/img/zfb.jpg
<<上一篇>
pdf前端预览源码
下一篇>>