1.需求


要实现这个时间轴的自然周、自然月的选择功能，需要思考两个问题

  1. 处理给定时间的本周与本月时间的显示，如输入 2021-07-29，最后一个月就是 2021-07-01 -
    2021-07-29，最后一周就是 2021-07-26 - 2021-07-29
  2. 获取往前的自然月和周的第一天和最后一天（每周固定七天好处理，每月的天数不确定，需要特殊处理）

2.给定时间 获取自然月、周的时间范围

处理周参数思路

moment().weekday(0) 设置日期为当前时区周一
moment().weekday(6) 设置日期为当前时区周日

处理月参数思路
当前月的最后一天的时间戳等于上个月的最后一天 + 24 _ 3600
const day1Unix = moment().date(1)).unix() // 获取当月 1 号日期时间戳
const dayLast = moment.unix(day1Unix - 24 _ 3600) // 获得上个月最后一天日期

根据上面的思路

3.获取时间轴 list

// 导入moment 并设置时间区域为中国
import moment from 'moment'
moment.locale('zh-cn')
/*** 根据时间刻度 day week month 生成对应的时间段列表* step: 时间段刻度 day | week | month* num: 输出多少组数据* displayTimeFormat: 显示时间的格式(可自定义)* rangeTimeFormat: 时间范围的格式(可自定义)*/
export const getRangeTimeList = function(step,num = 50,displayTimeFormat = 'YYYY年MM月DD日',rangeTimeFormat = 'YYYY-MM-DD'
) {let now = moment() // 当前日期let result: any[] = []const oneDayTime = 24 * 3600 // 一天的秒数 注意不是毫秒数let currentUnix = now.unix() // 当前unix时间戳const getTimeRange = (begin, end) => {return [begin.format(rangeTimeFormat), end.format(rangeTimeFormat)]}const getDisplayTime = (begin, end) => {return begin.format(displayTimeFormat) + '-' + end.format(displayTimeFormat)}if (step === 'day') {for (let k = 1; k <= num; k++) {const obj: any = {}const day = moment.unix(currentUnix)obj.timeRange = getTimeRange(day, day)obj.tooltip = getDisplayTime(day, day)result.push(obj)currentUnix -= oneDayTime}}if (step === 'week') {// 处理当前这周const lastWeek: any = {}const firstDay = moment(now).weekday(0)lastWeek.timeRange = getTimeRange(firstDay, now)lastWeek.tooltip = getDisplayTime(firstDay, now)currentUnix = firstDay.unix()result.push(lastWeek)// 处理剩余n-1周for (let k = 2; k <= num; k++) {const obj: any = {}const sunday = moment.unix(currentUnix - oneDayTime) // 当前周-时间戳减去一天 等于上周日时间戳const monday = moment(moment.unix(currentUnix - oneDayTime).weekday(0))obj.timeRange = getTimeRange(monday, sunday)obj.tooltip = getDisplayTime(monday, sunday)result.push(obj)currentUnix -= oneDayTime * 7}}if (step === 'month') {// 处理当前月const lastMonth: any = {}const firstDate = moment(now).date(1)lastMonth.timeRange = getTimeRange(firstDate, now)lastMonth.tooltip = getDisplayTime(firstDate, now)currentUnix = firstDate.unix()result.push(lastMonth)// 处理剩余n-1个月for (let k = 2; k <= num; k++) {const obj: any = {}const dayLast = moment.unix(currentUnix - oneDayTime) // 当前月第一天时间戳减去一天 等于上个月最后一天时间戳const n = dayLast.date()const day1 = moment(moment.unix(currentUnix - oneDayTime).date(1))obj.timeRange = getTimeRange(day1, dayLast)obj.tooltip = getDisplayTime(day1, dayLast)result.push(obj)currentUnix -= oneDayTime * n}}return result
}

测试一下

const day = getRangeTimeList('day')
const week = getRangeTimeList('week')
const month = getRangeTimeList('month')
console.log('												


											

js moment.js 给定时间 获取自然月、周的时间轴相关推荐
	

    
								
  1. java  1个月前_java获取一个月前的时间
		
    java获取一个月前的时间 方法一: SimpleDateFormat formatter = new SimpleDateFormat( "yyyyMMdd" ); Date c ...
    
		
    2. 
						
  2. js知道年月日怎么获取到是周几,和几月几号
		
    你可以使用 JavaScript 的内置对象 Date 来获取年月日.周几以及几月几号的信息. 下面是一些示例代码: // 获取当前日期 const today = new Date();// 获取年 ...
    
		
    3. 
						
  3. js localdate上一个月_moment.js格式化日期，获取前一个月的时间
		
    下载moment.js 格式化当前日期: //显示结果为:"2017-09-20 15:35:52" moment(new Date()).format('YYYY-MM-DD H ...
    
		
    4. 
						
  4. PHP strtotime 获取自然月误差问题解决方案
		
    基本写法产生的差异 for($i=1;$i<150;$i++){$date = date('Y-m-d',strtotime("+{$i} day",strtotime('2 ...
    
		
    5. 
						
  5. 【echarts样例】X轴为显示一周的时间轴
		
    源码 代码片段: var data = [{name:'"2018-07-05 18:00:29"', value:["2018-07-05 18:00:29" ...
    
		
    6. 
						
  6. 获取自然周 自然月 区间
		
    public static final SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");/*** @Descri ...
    
		
    7. 
						
  7. PHP获取时间戳、获取天周月的起始时间、指定时间所在周、指定时间的各个周等相关函数
		
    目录 一.时间戳和日期互相转换 二.PHP获取今日.昨日.上周.本周.上月.本月的起始时间戳 三.获取当前周的每天的起始时间 四.获取周的起始时间 1.根据指定时间获取所在周的起始时间和结束时间 2. ...
    
		
    8. 
						
  8. JS获取上周（自然周、最近七天）、上月（自然月、最近一个月）、全年的开始和结束日期
		
    JS获取上周(自然周.最近七天).上月(自然月.最近一个月).全年的开始和结束日期 let now = new Date(); let nowTime = now.getTime(); //当前的时间 ...
    
		
    9. 
						
  9. js获取几个月前，几周前时间。
		
    /** *  DK 命名空间  防止全局变量污染 */ var DK = {} ; /** * 获取前几个月,默认为一个月,当前时间 * @author duke * @date 格式为yyyy-mm ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 语义分割-- SegNet：A Deep Convolutional Encoder-Decoder Architecture for Image Segmentation
		
    2. 
						
  2. SAP MM 对于MRKO事务代码的几点优化建议
		
    3. 
						
  3. 实验室蒋田仔研究员：脑网络组图谱近10年研究详解【附PPT】
		
    4. 
						
  4. 问题解决——使用CriticalSection后 0xXXXXXXXX处最可能的异常: 0xC0000005: 写入位置 0x00000014 时发生访问冲突
		
    5. 
						
  5. ./src/cuda.c:36: check_error: Assertion `0‘ failed
		
    6. 
						
  6. 实例分析JAVA CLASS的文件结构
		
    7. 
						
  7. CryptoAPI与openssl RSA非对称加密解密(PKCS1 PADDING)交互
		
    8. 
						
  8. 【Java进阶】Spring Boot集成ES
		
    9. 
						
  9. JavaFX 2 GameTutorial第4部分
		
    10. 
						
  10. java 图片合成 红色失真_Java - 处理某些图片泛红
		
    11. 
						
  11. php json decode 遍历,php json_decode 解析中文
		
    12. 
						
  12. list 查找_五千字长文带你学习 二分查找算法
		
    13. 
						
  13. 图解50道sql编写题
		
    14. 
						
  14. ExtJs6第二弹-- 学会查看ExtJs api文档
		
    15. 
						
  15. 直播视频卡顿延迟时如何优化
		
    16. 
						
  16. 2023年全国管理类联考综合试卷真题及解析
		
    17. 
						
  17. 郭靖大侠的IT为学之路
		
    18. 
						
  18. 计算贷款的每月支付额。程序要求用户输入贷款的年利率、总金额            和年数，程序计算每月支付金额，并将结果显示输出。计算贷款的月支付额公式如下：（Java课本练习题  题目要求  ）
		
    19. 
						
  19. UE4打包设置和步骤（打最小的包）
		
    20. 
						
  20. linux 内核 mtd读取,/proc/mtd 各个参数含义 -- linux内核
		
    21. 
		

	


热门文章
	

    
									
  1. TOP Network 2019年度回顾：积蓄力量，再创辉煌
			
    2. 
						
  2. 微信登录的openid和unionid区别
			
    3. 
						
  3. Android集成友盟推送功能
			
    4. 
						
  4. 由吃饭想到的产品痛点问题
			
    5. 
						
  5. WEB前端网页设计 HTML网页代码 - 表单参数
			
    6. 
						
  6. 如何解决传统工厂能耗痛点
			
    7. 
						
  7. 第一章 FANUC数控机床采集方案
			
    8. 
						
  8. 如何才能招聘到合适的以太坊区块链开发者
			
    9. 
						
  9. python魔方方法超详细介绍
			
    10. 
						
  10. 从vue文件中抽取出子组件的流程及过程中踩过的坑
			
    11.