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

Differentiate between null value and empty character ('') in MySQL

In daily development, database addition, deletion...

How to use webSocket to update real-time weather in Vue

Table of contents Preface About webSocket operati...

Summarize several common ranking problems in MySQL

Preface: In some application scenarios, we often ...

Tutorial on installing MySQL8 compressed package version on Win10

1 Download MySQL8 from the official website and i...

MySQL 8.0.19 installation and configuration method graphic tutorial

This article records the installation and configu...

How to use js to determine whether a file is utf-8 encoded

Conventional solution Use FileReader to read the ...

Docker+nacos+seata1.3.0 installation and usage configuration tutorial

I spent a day on it before this. Although Seata i...

Sample code of uniapp vue and nvue carousel components

The vue part is as follows: <template> <...

TypeScript union types, intersection types and type guards

Table of contents 1. Union Type 2. Crossover Type...

Linux Cron scheduled execution of PHP code with parameters

1. Still use PHP script to execute. Command line ...

Installation tutorial of mysql 5.7 under CentOS 7

1. Download and install the official MySQL Yum Re...

How to set up Windows Server 2019 (with pictures and text)

1. Windows Server 2019 Installation Install Windo...

How to install MySQL Community Server 5.6.39

This article records the detailed tutorial of MyS...

vsCode generates vue templates with one click

1. Use the shortcut Ctrl + Shift + P to call out ...