JavaScript to achieve time range effect

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:
  • JavaScript generates a time list of a specified range
  • extjs time range selection automatic judgment implementation code

<<:  Common operation commands of MySQL in Linux system

>>:  nginx automatically generates configuration files in docker container

Recommend

Share some uncommon but useful JS techniques

Preface Programming languages ​​usually contain v...

Summary of common docker commands (recommended)

1. Summary: In general, they can be divided into ...

How to automatically execute SQL statements when MySQL in Docker starts

When creating a MySQL container with Docker, some...

Basic usage examples of listeners in Vue

Table of contents Preface 1. Basic usage of liste...

61 Things Every Web Developer Should Know

Normally, you'll need to read everyone's s...

Learn more about the most commonly used JavaScript events

Table of contents JavaScript events: Commonly use...

vue-cropper component realizes image cutting and uploading

This article shares the specific code of the vue-...

What is HTML?

History of HTML development: HTML means Hypertext...

How to use mysqldump to backup MySQL data

1. Introduction to mysqldump mysqldump is a logic...

Html+CSS drawing triangle icon

Let’s take a look at the renderings first: XML/HT...

Solution to the routing highlighting problem of Vue components

Preface Before, I used cache to highlight the rou...