【日期中周年月的选择，总结完成的需求任务，得到选择的具体时间范围】

最新推荐文章于 2024-10-16 11:23:07 发布

彩虹色的dream

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量279

点赞数

本文链接：https://blog.csdn.net/weixin_56657940/article/details/124345748

版权

JavaScript 动态渲染下拉框时间范围日期处理

关键词由CSDN通过智能技术生成

有两个下拉框，根据第一个下拉框的选择动态渲染第二个下拉框中的可选值

一：第一个下拉框的值是固定的，周年月三个选项

<select id="one_select" name="one_select">
     <option value="week" selected="selected">周</option>
     <option value="month">月</option>
     <option value="year">年</option>
</select>
<select id="two_select" name="two_select"></select>

二：第二个下拉框的值定义在一个对象中，方便存取

var time_selects={
    "week":[],
    "month":[],
    "year":[]
}

三：初始化第二个下拉框的值，当前月表示本月，当前周表示本周

function initSelectValues(){
    var month1 = new Date().getMonth()+1;
    time_selects.week.length = 0;
    time_selects.month.length = 0;
    time_selects.year.length = 0;
    var numtochinese='';
    function numberMap(num) {
        switch (num){
            case 1:
                numtochinese='一';
                break;
            case 2:
                numtochinese='二';
                break;
            case 3:
                numtochinese='三';
                break;
            case 4:
                numtochinese='四';
                break;
            case 5:
                numtochinese='五';
                break;
            case 6:
                numtochinese='六';
                break;
            case 7:
                numtochinese='七';
                break;
            case 8:
                numtochinese='八';
                break;
            case 9:
                numtochinese='九';
                break;
            case 10:
                numtochinese='十';
                break;
            case 11:
                numtochinese='十一';
                break;
            case 12:
                numtochinese='十二';
                break;
        }
        return numtochinese;
    }

    var week_current = getWeek();
    var year_current = new Date().getFullYear();
    for(var i=week_current;i>0;i--){
        if(i==week_current){
            time_selects.week.push({text:"本周",value:i});
        }else{
            time_selects.week.push({text:"第"+numberMap(i)+"周",value:i})
        }
    }

    for(var i=month1;i>0;i--){
        if(i==month1){
            time_selects.month.push({text:"本月",value:i});
        }else{
            time_selects.month.push({text:numberMap(i)+"月",value:i})
        }
    }

    for(var i=year_current;i>=2021;i--){
        time_selects.year.push({text:i,value:i});
    }
}

四：根据第一个下拉框的选择动态生成第二个下拉框的选项值

//根据周月年动态生成第二个下拉框的options
function  bindChange(id1,id2) {
    function bindSelect2(timeType,id2) {
        $("#"+id2).empty();
        if(timeType=="month"){
            $.each(time_selects.month,function(index,value){
                if(index==0){
                    $('#'+id2).append('<option value="'+value.value+'" selected="selected">'+value.text+'</option>');

                }else{
                    $('#'+id2).append('<option value="'+value.value+'">'+value.text+'</option>');
                }
            });

        } else if(timeType=="year"){
            $.each(time_selects.year,function(index,value){
                if(index==0){
                    $('#'+id2).append('<option value="'+value.value+'" selected="selected">'+value.text+'</option>');

                }else{
                    $('#'+id2).append('<option value="'+value.value+'">'+value.text+'</option>');
                }
            });
        }else if(timeType=="week"){
            $.each(time_selects.week,function(index,value){
                if(index==0){
                    $('#'+id2).append('<option value="'+value.value+'" selected="selected">'+value.text+'</option>');

                }else{
                    $('#'+id2).append('<option value="'+value.value+'">'+value.text+'</option>');
                }
            });
        }
    }

    //按时间筛选
    $('#'+id1).on('change', function () {
        var timeType = $('#'+id1).val();
        bindSelect2(timeType,id2);
        $("#"+id2).trigger("change");
    });
    var timeType = $('#'+id1).val();
    bindSelect2(timeType,id2); // 初始化默认下拉值

}

五：格式化日期

//格式化日期：yyyy-MM-dd
function formatDate(date) {
    var myyear = date.getFullYear();
    var mymonth = date.getMonth()+1;
    var myweekday = date.getDate();

    if(mymonth < 10){
        mymonth = "0" + mymonth;
    }
    if(myweekday < 10){
        myweekday = "0" + myweekday;
    }
    return (myyear+"-"+mymonth + "-" + myweekday);
}

六：获取本周的开始日期

function getWeekStartDate() {
    var day = nowDayOfWeek || 7;
    var weekStartDate = new Date(nowYear, nowMonth, nowDay - day+1);
    return formatDate(weekStartDate);
}

七：获取本月第几周的开始结束日期，不传或0表示本周，1表示下周，-1表示上周

//获得第几周的开始日期,不传或0代表本周，-1代表上周,-2代表上上周，1代表下周
function getoneWeekStartDate(type, dates) {
        //dates为数字类型，
        dates=dates||0;
        var now = new Date();
        var nowTime = now.getTime();
        var day = now.getDay();
        var longTime = 24 * 60 * 60 * 1000;
        var n = longTime * 7 * dates;
        if (type == "start") {
            var dd = nowTime - (day - 1) * longTime + n;
        };
        if (type == "end") {
            if(dates==0){
                //如果本周还未结束，即设置本周的结束日期为当前时间
                var dd = nowTime + n;
            }else{
                var dd = nowTime + (7 - day) * longTime + n;
            }
        };
        dd = new Date(dd);
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1;
        var d = dd.getDate();
        m = m < 10 ? "0" + m: m;
        d = d < 10 ? "0" + d: d;
        var day = y + "-" + m + "-" + d;
        return day;
}

八：获取本月的开始日期

//获得本月的开始日期
function getMonthStartDate(){
    var monthStartDate = new Date(nowYear, nowMonth, 1);
    return formatDate(monthStartDate);
}

九：获取某月的开始结束日期，不传或0表示本月，1表示下月，-1表示上月

//获得第几月的开始结束日期不传或0代表本月，-1代表上月，1代表下月
function getoneMonthStartDate(type, months) {
    // months为数字类型
    months=months||0;
    var d = new Date();
    var year = d.getFullYear();
    var month = d.getMonth() + 1;
    if (Math.abs(months) > 12) {
        months = months % 12;
    };
    if (months != 0) {
        if (month + months > 12) {
            year++;
            month = (month + months) % 12;
        } else if (month + months < 1) {
            year--;
            month = 12 + month + months;
        } else {
            month = month + months;
        };
    };
    month = month < 10 ? "0" + month: month;
    var date = d.getDate();
    var firstday = year + "-" + month + "-" + "01";
    var lastday = "";
    if(months!=0){
        if (month == "01" || month == "03" || month == "05" || month == "07" || month == "08" || month == "10" || month == "12") {
                lastday = year + "-" + month + "-" + 31;
        } else if (month == "02") {
            if ((year % 4 == 0 && year % 100 != 0) || (year % 100 == 0 && year % 400 == 0)) {
                lastday = year + "-" + month + "-" + 29;
            } else {
                lastday = year + "-" + month + "-" + 28;
            };
        } else {
            lastday = year + "-" + month + "-" + 30;
        };
    }else{
        if(date < 10){
            date = "0" + date;
        }
        lastday=year+'-'+month+'-'+date;
    }
    var day = "";
    if (type == "start") {
        day = firstday;
    } else {
        day = lastday;
    };
    return day;
}

十：获取本周是本月的第几周

//获得本周是本月的第几周
function getWeek() {
    var data = new Date();
    var thesaturday=data.getDate()+(6-data.getDay());//22+(6-5);21+(6-4);26+(6-2)
    return Math.floor(thesaturday/7)+1;//3
}

十一：计算某月1号是星期几

//计算某月1号是星期几
var getWeekInMonth = function (year, month) {
    return new Date(year + '/' + month + '/' + '01').getDay();
}

十二：获取本年的开始日期：

//获得本年的开始日期
function getYearStartDate(){
    var monthStartDate = new Date(nowYear, 0, 1);
    return formatDate(monthStartDate);
}

十三：根据第二个下拉框的选择获取week的开始结束日期，返回一个map

//获取日期的week dates部分
function  getWeekDates(thisWeek,index) {
    var oneWeekStartTime='';
    var oneWeekEndTime='';
    var getWeekDatesMap={};
    var num=thisWeek-index;//4-4
    var weekInMonthday=getWeekInMonth(new Date().getFullYear(),new Date().getMonth()+1);//5
    for(var i=1;i<=thisWeek;i++){
        if(num<=0){
            if(weekInMonthday!=1&&index==1){
                //如果选取的是本周且本月的第一周，即拿本月的第一天作为本月的第一周，说明：本月开始即为第一周，不管是不是完整的一周
                oneWeekStartTime=getMonthStartDate();//2022-04-01
            }else{
                oneWeekStartTime=getoneWeekStartDate('start',0);//2022-04-11
            }
            oneWeekEndTime=getoneWeekStartDate('end',0);//2022-04-27
            getWeekDatesMap.start=oneWeekStartTime;
            getWeekDatesMap.end=oneWeekEndTime;
        }else if(num==i){
            if(weekInMonthday!=1&&index==1){
                oneWeekStartTime=getMonthStartDate();
            }else{
                oneWeekStartTime=getoneWeekStartDate('start',-i);
            }
            oneWeekEndTime=getoneWeekStartDate('end',-i);
            getWeekDatesMap.start=oneWeekStartTime;
            getWeekDatesMap.end=oneWeekEndTime;
        }
    }
    return getWeekDatesMap;
}

十四：根据第二个下拉框的选择获取month的开始结束日期，返回一个map

//获得第一年的开始日期 num:-1去年 0/null今年
function getoneYearStartDate(type,num) {
    var date = new Date();
    var n = num || 0;
    var year = date.getFullYear()+Number(n);
    if (type == "start") {
        var yearStartDate = year + "-01-01";
    };
    if (type == "end") {
        var yearStartDate='';
        if(n==0){
            var toMonth=date.getMonth()+1;
            var todayDate=date.getDate();
            if(toMonth < 10){
                toMonth = "0" + toMonth;
            }
            if(todayDate < 10){
                todayDate = "0" + todayDate;
            }
            yearStartDate=date.getFullYear()+'-'+toMonth+'-'+todayDate;
        }else{
            yearStartDate = year + "-12-31";
        }
    };
    if (!type) {
        var yearStartDate = year + "-01-01/" + year + "-12-31";
    };
    return yearStartDate;
}

十五：根据两个下拉框select的id去获取对应的时间范围，渲染对应的图表，返回一个map

//获取第一个下拉框时间范围
function getStartEndTime(onerangeStr,tworangeStr) {
    var beginTime = '';
    var endTime = '';
    var myDate = new Date();
    var thisWeek=0;
    var thisMonth=0;
    var resultMap={};
    switch (onerangeStr) {
        case 'week':
            beginTime = getWeekStartDate();
            thisWeek=Number(getWeek());//4
            switch (tworangeStr){
                case '1':
                    resultMap=getWeekDates(thisWeek,1);
                    break;
                case '2':
                    resultMap=getWeekDates(thisWeek,2);
                    break;
                case '3':
                    resultMap=getWeekDates(thisWeek,3);
                    break;
                case '4':
                    resultMap=getWeekDates(thisWeek,4);
                    break;
                case '5':
                    resultMap=getWeekDates(thisWeek,5);
                    break;
            }
            break;
        case 'month':
            beginTime = getMonthStartDate();
            thisMonth=Number(myDate.getMonth()+1);//2
            switch (tworangeStr){
                case '1':
                    resultMap=getMonthDates(thisMonth,1);
                    break;
                case '2':
                    resultMap=getMonthDates(thisMonth,2);
                    break;
                case '3':
                    resultMap=getMonthDates(thisMonth,3);
                    break;
                case '4':
                    resultMap=getMonthDates(thisMonth,4);
                    break;
                case '5':
                    resultMap=getMonthDates(thisMonth,5);
                    break;
                case '6':
                    resultMap=getMonthDates(thisMonth,6);
                    break;
                case '7':
                    resultMap=getMonthDates(thisMonth,7);
                    break;
                case '8':
                    resultMap=getMonthDates(thisMonth,8);
                    break;
                case '9':
                    resultMap=getMonthDates(thisMonth,9);
                    break;
                case '10':
                    resultMap=getMonthDates(thisMonth,10);
                    break;
                case '11':
                    beginTime=getMonthDates(thisMonth,11);
                    break;
                case '12':
                    beginTime=getMonthDates(thisMonth,12);
                    break;
            }
            break;
        case 'year':
            beginTime = getYearStartDate();//2022-01-01
            var twoSelect=myDate.getFullYear()-tworangeStr;//2021
            switch (twoSelect){
                case 0:
                    beginTime=getoneYearStartDate('start');
                    endTime=getoneYearStartDate('end');
                    resultMap.start=beginTime;
                    resultMap.end=endTime;
                    break;
                case 1:
                    beginTime=getoneYearStartDate('start',-1);
                    endTime=getoneYearStartDate('end',-1);
                    resultMap.start=beginTime;
                    resultMap.end=endTime;
                    break;
            }
            break;
        default:
            var year_month = myDate.getFullYear();
            var month_month = myDate.getMonth() + 1;
            var day_month = myDate.getDate();
            if (month_month === 0) {
                month_month = 12;
            } else if (month_month < 10) {
                month_month = '0' + month_month;
            }
            beginTime = year_month + '-' + month_month + '-' + day_month;
            break;
    }
    return resultMap;
}

十六：如果只有一个下拉框，不用根据第一个动态渲染第二个，获取时间范围

//获取时间范围
function getStartTime(rangeStr) {
    var beginTime = '';
    var myDate = new Date();
    switch (rangeStr) {
        case 'week':
            beginTime = getWeekStartDate();
            break;
        case 'month':
            beginTime = getMonthStartDate();
            break;
        case 'year':
            beginTime = getYearStartDate();
            break;
        case 'sum':
            beginTime = "1970-01-02";
            break;
        default:
            var year_month = myDate.getFullYear();
            var month_month = myDate.getMonth() + 1;
            var day_month = myDate.getDate();
            if (month_month === 0) {
                month_month = 12;
            } else if (month_month < 10) {
                month_month = '0' + month_month;
            }
            beginTime = year_month + '-' + month_month + '-' + day_month;
            break;
    }
    return beginTime;
}