JavaScript to achieve time range effect

This article shares the specific code for JavaScript to achieve the time range effect for your reference. The specific content is as follows

Time range before the current time (six months ago)

Rendering

js file code snippet

/*Query date range (current time forward) Add By Vivian 2020/12/04 */
//rangeVal: the separator between two dates num: the interval timeType: the time type function funGetRangeDateByLess(rangeVal,num,timeType){
    var returnVal="";
    var otherVal="";
    var otherTime="";
    var curTime = new Date();
    var curTimeVal = curTime.getFullYear() + '-' + PrefixZero((curTime.getMonth() + 1), 2) + '-' + PrefixZero(curTime.getDate(), 2);
    switch (timeType) {
        case 1://var addMinutes = curTime.setMinutes(curTime.getMinutes() - num);
            otherTime=new Date(addMinutes);
            break;
        case 2://var addMinutes = curTime.setHours(curTime.getHours() - num);
            otherTime=new Date(addMinutes);
            break;
        case 3://dayvar addDate = curTime.setDate(curTime.getDate() - num);
            otherTime=new Date(addDate);
            break;
        case 4://monthvar addMonth = curTime.setMonth(curTime.getMonth() - num);
            otherTime=new Date(addMonth);
            break;
        case 5://yearvar addYear = curTime.setFullYear(curTime.getFullYear() - num);
            otherTime=new Date(addYear);
            break;
        default:
            break;
    }
    otherVal = otherTime.getFullYear() + '-' + PrefixZero((otherTime.getMonth() + 1), 2) + '-' + PrefixZero(otherTime.getDate(), 2);
    return returnVal=otherVal+rangeVal+curTimeVal;
}

/*Automatically fill in zeros Add By Vivian 2020/12/04 */
function PrefixZero(num, n) {
    return (Array(n).join(0) + num).slice(-n);
}

Using Code Snippets

var fillhelptime=funGetRangeDateByLess(" , ",6,4);
laydate.render({
        elem: "#fillhelptime",
        range: ",",
        type: 'date',
        value:fillhelptime, //default value });

The time range of a date (how many days before and after)

Rendering

js file code snippet

/*Query the date range (how many days before and after a certain date) Add By Vivian 2021/04/06 */
//rangeVal: the separator between two datesdate: a certain datebeforeDays: the first N daysafterDays: the last N daysfunction funGetRangeDateByBeforeAndAfter(rangeVal,date,beforeDays,afterDays){
    var dateVaule1 = new Date(date);//Convert to time format var dateVaule2 = new Date(date);//Convert to time format var startDate = new Date(dateVaule1.setDate(dateVaule1.getDate() - beforeDays));//First N days var endDate = new Date(dateVaule2.setDate(dateVaule2.getDate() + afterDays));//Later N days var date1 = startDate.getFullYear() + '-' + PrefixZero((startDate.getMonth() + 1), 2) + '-' + PrefixZero(startDate.getDate(), 2);
    var date2 = endDate.getFullYear() + '-' + PrefixZero((endDate.getMonth() + 1), 2) + '-' + PrefixZero(endDate.getDate(), 2);
    var returnVal=date1+rangeVal+date2;
    return returnVal;
}

/*Automatically fill in zeros Add By Vivian 2020/12/04 */
function PrefixZero(num, n) {
    return (Array(n).join(0) + num).slice(-n);
}

The time range of a certain point in time (how many days before and after)

Rendering

js file code snippet

/*Query the date range (how much time before and after a certain time point) Add By Vivian 2021/04/06 */
//rangeVal: the separator between two dates timeType: the time type between them date: a certain date beforeDays: the first N days afterDays: the last N days function funGetRangeDateByBeforeAndAfter(rangeVal,timeType,date,beforeNum,afterNum){
    var dateVaule1 = new Date(date);//Convert to time format var dateVaule2 = new Date(date);//Convert to time format var startDate = "";
    var endDate = "";
    switch (timeType) {
        case 1://startDate = new Date(dateVaule1.setMinutes(dateVaule1.getMinutes() - beforeNum));//First N minutesendDate = new Date(dateVaule2.setMinutes(dateVaule2.getMinutes() + afterNum));//After N minutesbreak;
        case 2://startDate = new Date(dateVaule1.setHours(dateVaule1.getHours() - beforeNum));//First N hoursendDate = new Date(dateVaule2.setHours(dateVaule2.getHours() + afterNum));//After N hoursbreak;
        case 3://daysstartDate = new Date(dateVaule1.setDate(dateVaule1.getDate() - beforeNum));//First N daysendDate = new Date(dateVaule2.setDate(dateVaule2.getDate() + afterNum));//After N daysbreak;
        case 4://monthstartDate = new Date(dateVaule1.setMonth(dateVaule1.getMonth() - beforeNum));//first N monthsendDate = new Date(dateVaule2.setMonth(dateVaule2.getMonth() + afterNum));//after N monthsbreak;
        case 5://yearstartDate = new Date(dateVaule1.setFullYear(dateVaule1.getFullYear() - beforeNum));//First N yearsendDate = new Date(dateVaule2.setFullYear(dateVaule2.getFullYear() + afterNum));//After N yearsvar addYear = curTime.setFullYear(curTime.getFullYear() - num);
            break;
        default:
            break;
    }
    var returnVal1 = startDate.getFullYear() + '-' + PrefixZero((startDate.getMonth() + 1), 2) + '-' + PrefixZero(startDate.getDate(), 2);
    var returnVal2 = endDate.getFullYear() + '-' + PrefixZero((endDate.getMonth() + 1), 2) + '-' + PrefixZero(endDate.getDate(), 2);
    var returnVal=returnVal1+rangeVal+returnVal2;
    return returnVal;
}

/*Automatically fill in zeros Add By Vivian 2020/12/04 */
function PrefixZero(num, n) {
    return (Array(n).join(0) + num).slice(-n);
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: