Vue如何获取两个时间点之间的所有间隔时间

目录
  • 获取两个时间点之间的所有间隔时间
    • 获取两个时间之间的 间隔时间
    • 获取两个日期之间的间隔日期
    • 获取指定两个月份之间的 间隔月份

获取两个时间点之间的所有间隔时间

  • 说明 使用的是vue@2.6.12和elementUI@2.14.1
  • 使用的是TS,用来校验数据格式
  • 所有返回的数据都是在时间前面自动补全了0
  • 使用的主要方法是new Date().setFullYear()设置当前的时间,如果传入的时间是new Date().setFullYear(2020,12,32),该方法会自动将时间转化为2021-1-1的时间戳 **如果有一个参数超出了合理的范围,setFullYear 方法会更新其他参数值,日期对象的日期值也会被相应更新。 例如,为 monthValue指定 15, 则年份会加1,月份值会为3 ** MDN说明

获取两个时间之间的 间隔时间

/** 获取两个时间之间的 间隔时间
 * @param { Date | number | string } startTime 开始时间 字符串格式(6:00 06:00 18:00, 18:00:00) 必须是24小时格式
 * @param { Date | number | string } endTime 结束时间 字符串格式(6:00 06:00 18:00, 18:00:00) 必须是24小时格式
 */
export function getBetweenTime(startTime: string, endTime: string): Array<string> {
    // 校验时间格式
    if (typeof startTime === 'string' && typeof endTime === 'string') {
        const reg = /^(0?[1-9]|([1-2][0-4])):(([0-5][0-9])(:([0-9][0-9]))?)$/
        if (!reg.test(startTime)) throw `开始时间:${startTime} 时间格式错误`
        if (!reg.test(endTime)) throw `结束时间:${endTime} 时间格式错误`
    } else throw `${startTime} 或者 ${endTime} 时间格式错误`
    let start: number = +startTime.split(':')[0]
    let end: number = +endTime.split(':')[0]
    const resultTime: string[] = []
    // 当 开始时间小于结束时间的时候进入循环
    while (start <= end) {
        // 拼接时间格式 自动给 小于10的时间前面补0
        let setTime = start >= 10 ? `${start}:00` : `0${start}:00`
        resultTime.push(setTime)
        // 重新设置开始时间
        start += 1
    }
    return resultTime
}

获取两个日期之间的间隔日期

/** 获取两个日期之间的间隔日期
 * @param { Date | number | string } startTime 开始时间 标准时间格式 时间戳格式 字符串格式(2008-08-08,2008-8-8,2008-08-8,2008-8-08)
 * @param { Date | number | string } endTime 结束时间 标准时间格式 时间戳格式 字符串格式(2008-08-08,2008-8-8,2008-08-8,2008-8-08)
 *  */
export function getBetweenDate(
    startTime: Date | number | string,
    endTime: Date | number | string
): Array<string> {
    // 校验时间格式
    if (typeof startTime === 'string') {
        const reg = /^\d{4}-(0?[1-9]|1[0-2])-((0?[1-9])|((1|2)[0-9])|30|31)$/g
        if (!reg.test(startTime)) throw `开始时间:${startTime}时间格式错误`
    }
    if (typeof endTime === 'string') {
        const reg = /^\d{4}-(0?[1-9]|1[0-2])-((0?[1-9])|((1|2)[0-9])|30|31)$/g
        if (!reg.test(endTime)) throw `结束时间:${endTime}时间格式错误`
    }
    let start: Date = new Date(startTime)
    let end: Date = new Date(endTime)
    const resultTime: string[] = []
    // 当 开始时间小于结束时间的时候进入循环
    while (start <= end) {
        let getDay = start.getDate()
        // 月份需要加 1
        let getMonth = start.getMonth() + 1
        let getYear = start.getFullYear()
        /**
         * 拼接时间格式
         * (getMonth >= 10 ? `${getMonth}` : `0${getMonth}`) 自动给 小于10的时间前面补0
         */
        let setTime =
            `${getYear}-` +
            (getMonth >= 10 ? `${getMonth}` : `0${getMonth}`) +
            '-' +
            (getDay >= 10 ? `${getDay}` : `0${getDay}`)
        resultTime.push(setTime)
        /**
         * 重新设置开始时间
         * 使用 setFullYear() 方法会自动将时间累加,返回的是时间戳格式
         * 使用 new Date() 将时间重新设置为标准时间
         * getMonth - 1 将月份时间重新还原
         */
        start = new Date(start.setFullYear(getYear, getMonth - 1, getDay + 1))
    }
    return resultTime
}

获取指定两个月份之间的 间隔月份

/**
 * 获取指定两个月份之间的 间隔月份
 * @param { Date | number | string } startTime 开始时间 标准时间格式 时间戳格式 字符串格式(2008-08,2008-8)
 * @param { Date | number | string } endTime 结束时间 标准时间格式 时间戳格式 字符串格式(2008-08,2008-8)
 */
export function getBetweenMonth(
    startTime: Date | number | string,
    endTime: Date | number | string
): Array<string> {
    // 校验时间格式
    if (typeof startTime === 'string') {
        const reg = /^\d{4}-(0?[1-9]|1[0-2])$/g
        if (!reg.test(startTime)) throw `开始时间:${startTime}时间格式错误`
    }
    if (typeof endTime === 'string') {
        const reg = /^\d{4}-(0?[1-9]|1[0-2])$/g
        if (!reg.test(endTime)) throw `结束时间:${endTime}时间格式错误`
    }
    let start: Date = new Date(startTime)
    let end: Date = new Date(endTime)
    const resultTime: string[] = []
    // 当 开始时间小于结束时间的时候进入循环
    while (start <= end) {
        // 月份需要加 1
        let getMonth = start.getMonth() + 1
        let getYear = start.getFullYear()
        /**
         * 拼接时间格式
         * (getMonth >= 10 ? `${getMonth}` : `0${getMonth}`) 自动给 小于10的时间前面补0
         */
        let setTime = `${getYear}-` + (getMonth >= 10 ? `${getMonth}` : `0${getMonth}`)
        resultTime.push(setTime)
        /**
         * 重新设置开始时间
         * 使用 setFullYear() 方法会自动将时间累加,返回的是时间戳格式
         * 使用 new Date() 将时间重新设置为标准时间
         */
        start = new Date(start.setFullYear(getYear, getMonth))
    }
    return resultTime
}

获取两个年份时间点 之间的间隔年份

/** 获取两个年份时间点 之间的间隔年份
 * @param { Date | number | string } startTime 开始时间 标准时间格式 时间戳格式 字符串格式(2008)
 * @param { Date | number | string } endTime 结束时间 标准时间格式 时间戳格式 字符串格式(2008)
 */
export function getBetweenYear(
    startTime: Date | number | string,
    endTime: Date | number | string
): Array<string> {
    // 校验时间格式
    if (typeof startTime === 'string') {
        const reg = /^\d{4}$/g
        if (!reg.test(startTime)) throw `开始时间:${startTime}时间格式错误`
    }
    if (typeof endTime === 'string') {
        const reg = /^\d{4}$/g
        if (!reg.test(endTime)) throw `结束时间:${endTime}时间格式错误`
    }
    let start: Date = new Date(startTime)
    let end: Date = new Date(endTime)
    const resultTime: string[] = []
    // 当 开始时间小于结束时间的时候进入循环
    while (start <= end) {
        let getYear = start.getFullYear()
        // 拼接时间格式
        let setTime = `${getYear}`
        resultTime.push(setTime)
        /**
         * 重新设置开始时间
         * 使用 setFullYear() 方法会自动将时间累加,返回的是时间戳格式
         * 使用 new Date() 将时间重新设置为标准时间
         */
        start = new Date(start.setFullYear(getYear + 1))
    }
    return resultTime
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 浅谈在Vue.js中如何实现时间转换指令

    在社区中,发布的动态信息,经常会有一个相对余实际发布时间的相对时间.比如这里的微博: 服务端存储的时间格式,一般为 Unix 时间戳,比如 2019/1/6 13:40:1 的Unix 时间戳为 1546753201651.前端在获取到这个时间戳之后,会转换为可读格式的时间.在社交类产品中,一般会将时间戳转换为 x 分钟前,x 小时前或者 x 天前,因为这样的显示方式用户体验更好. 我们可以自定义一个 v-relative-time 指令来实现上述功能. html: <!DOCTYPE html

  • Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)

    在methods中创建方法showtime,传入要跟当前时间要对比的时间 showtime(time) { let date = typeof time === "number" ? new Date(time) : new Date((time || "").replace(/-/g, "/")); let diff = (new Date().getTime() - date.getTime()) / 1000; let dayDiff =

  • Vue实现点击时间获取时间段查询功能

    本文实例为大家分享了vue按时间段查询的案例,效果图如下 html代码 <template> <div class="personalReport_time"> <input type="date" :max="this.endTime" value="" v-model="startTime"/> <div></div> <input ty

  • Vue如何获取两个时间点之间的所有间隔时间

    目录 获取两个时间点之间的所有间隔时间 获取两个时间之间的 间隔时间 获取两个日期之间的间隔日期 获取指定两个月份之间的 间隔月份 获取两个时间点之间的所有间隔时间 说明 使用的是vue@2.6.12和elementUI@2.14.1 使用的是TS,用来校验数据格式 所有返回的数据都是在时间前面自动补全了0 使用的主要方法是new Date().setFullYear()设置当前的时间,如果传入的时间是new Date().setFullYear(2020,12,32),该方法会自动将时间转化为

  • c#获取两个特定字符之间的内容并输出的方法

    今天一直在绞尽脑汁的寻找解决两个字符之间的内容如何输出的问题,刚开始就使用了万能的正则表达式:但是不知哪里的原因 自己的数据一直出不来,觉得应该是我输入的字符的问题吧,因为我获取的是一个inp文件里的内容(类似与文本文件): 虽然这次正则表达的强大没有被我展示出来,但是依旧捍卫不了他在我心里的位子:还是有必要把他的使用方法贴出来: string result=regex.matchs(your str, "(?<=beginstr).*?(?=endstr)").value 经过

  • Ruby日期时间的比较,日期转换等时间日期处理方法大全

    Ruby中Date.Time. DateTime这3个类提供 了和日期时间相关的操作. Date只能处理日期Time能处理日期和时间DateTime也能处理日期和时间 其中,DateTime 是Date的一个子类,是对时间部分数据的补充.要使用Date和DateTime类,只需导入date库就可以,要使用Time类,导入time库就行. require 'date' # 提供Date和DateTime类 require 'time' # 提供Time类(可直接使用,但导入后有更多方法) 一般来说

  • python3获取两个日期之间所有日期,以及比较大小的实例

    如下所示: import datetime #获取两个日期间的所有日期 def getEveryDay(begin_date,end_date): date_list = [] begin_date = datetime.datetime.strptime(begin_date, "%Y-%m-%d") end_date = datetime.datetime.strptime(end_date,"%Y-%m-%d") while begin_date <=

  • js实现获取两个日期之间所有日期的方法

    本文实例讲述了js实现获取两个日期之间所有日期的方法.分享给大家供大家参考,具体如下: <script> function getDate(datestr){ var temp = datestr.split("-"); var date = new Date(temp[0],temp[1],temp[2]); return date; } var start = "2012-3-25"; var end = "2012-4-3";

  • C#获取两个时间的时间差并去除周末(取工作日)的方法

    本文实例讲述了C#获取两个时间的时间差并去除周末的方法.分享给大家供大家参考.具体分析如下: 一般来说取时间差的代码很多,但是能够只取工作日的时间差的代码很少,这段代码就来实现这一功能. protected void Page_Load(object sender, EventArgs e) { DateTime start = Convert.ToDateTime("2012-12-10"); DateTime end= Convert.ToDateTime("2012-1

  • Vue 中获取当前时间并实时刷新的实现代码

    1. 实现代码 <template> <div> {{nowDate}}{{nowWeek}}{{nowTime}} </div> </template> <script> export default { data(){ return { nowDate: "", // 当前日期 nowTime: "", // 当前时间 nowWeek: "" // 当前星期 } }, methods

  • Java通过经纬度坐标获取两个点之间的直线距离的示例

    前言 现在很多App都需要附带着附近人列表功能,所以我在这里实现2个点之间的距离计算 经纬度的获取需要第三方来支持,高德地图.百度地图.... 附近人功能具体的实现逻辑: 1.获取每个人的经纬度坐标,存库记录 2.通过SQL获取指定距离范围内的用户列表(文章的 "二.MySQL中通过经纬度,获取范围内的用户") 3.通过获取到的用户列表,计算自己与用户之间度距离(文章的 "一.JAVA代码实现计算AB两点的直线距离") 一.JAVA代码实现计算AB两点的直线距离 我

  • vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作

    在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-server模拟的接口,这个前面的文章中有提到,需要的可以去翻阅. 整个的流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据,然后在组件的计算属性中获取state的数据并渲染在页面上 首先新需要在项

  • Go获取两个时间点时间差的具体实现

    目录 获取当前时间及其秒.毫秒.纳秒数 获取两个时间点时间差代码 获取指定时间前的时间 获取指定时间后的时间 获取当前时间及其秒.毫秒.纳秒数 now := time.Now() //获取当前时间 ==>2019-08-21 11:30:51.2470317 +0800 CST m=+0.004501101 fmt.Printf("时间戳(秒):%v;\n", time.Now().Unix()) //10位 fmt.Printf("时间戳(纳秒):%v;\n"

随机推荐