处理时间显示格式

  • 在工作中常常会需要处理时间的显示格式,下面是我最近用到的几个案例,简单记录一下。
  • 1、拿到一个时间段:starttime和endtime,格式为yyyy--mm--dd。需要在前端拆分成每一天并带上周天信息。最后输出一个日期数组展示在option下拉列表里
// 时间选择转换
   getFormat(date){
   		let weekList = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
   	  let YYYY = date.getFullYear()+'-'
   		let MM = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
     let DD = date.getDate();
     if(DD<=9){
       DD = '0'+DD+''
     }
     let newweek = weekList[date.getDay()]
     // return (date+'('+newweek+')')
   		return (YYYY+MM+DD+'('+newweek+')')
   	},
   	computedTime (start,end){
     let oneday = 86400000
     let weList =[]
   		let strCuo = new Date(start).getTime()-oneday
   		let endCuo = new Date(end).getTime()
   		let dayNum = (endCuo-strCuo)/oneday //几天
   		for(var i =0; i < dayNum; i++){
   			strCuo += oneday
   			var addDate = new Date(strCuo)
   			weList.push(this.getFormat(addDate)) 
     }
     console.log(weList);  
     return weList
   	},
  • 看看效果:
  • 2、电商网站物流进度信息的时间列表,拿到的每一条快递更新数据是yyyy-mm-dd格式,改动需求:UI要求每一天的第一条信息时间格式为:yyyy-mm-dd,当天之后的都是mm-dd格式,信息多了方便用户辨别
    大概效果是酱紫的:
var items= [        "2020 12 20 08:10:35",
                    "2020 12 20 11:06:01",
                    "2021 01 24 00:00:00",
                    "2021 01 24 03:00:00",
                    "2021 01 24 04:00:00"];
            function test(){
                let dateFlag = "";
                for (var i =0;i<this.items.length;i++) {
                    var strs = this.items[i].split(" ");
                    if (dateFlag === strs[0]+strs[1]+strs[2]) {
                        this.items[i]=strs[3]
                    }
                    dateFlag = strs[0]+strs[1]+strs[2]
                    console.log(dateFlag)
                }
                console.log(this.items)
            }
            test();

  • 上面demo输出结果:

  • 大多情况就是将时间格式转为想要的格式再字符拼接~~

作者:一颗皮皮高QAQ
欢迎任何形式的转载,但请务必注明出处。
限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。

posted @   一颗皮皮高QAQ  阅读(335)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示