JS获取时间(今天,昨天,近七天,近三天,近一个月,近六个月)

本文介绍了一个使用JavaScript编写的函数,该函数能够生成指定日期范围内的日期列表,支持获取过去或未来的日期范围,适用于多种场景如近一周、近一个月等日期范围的获取。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

getDateRange(dateNow,intervalDays,bolPastTime){
			  let oneDayTime = 24 * 60 * 60 * 1000;
			  let list = [];
			  let lastDay;

			  if(bolPastTime == true){
				  lastDay = new Date(dateNow.getTime() - intervalDays * oneDayTime);
				  list.push(this.formateDate(lastDay));
				  list.push(this.formateDate(dateNow));
			  }else{
				  lastDay = new Date(dateNow.getTime() + intervalDays * oneDayTime);
				  list.push(this.formateDate(dateNow));
				  list.push(this.formateDate(lastDay));
			  }
			  return list;
		  },
		  formateDate(time)
	    {
		    let year = time.getFullYear()
		    let month = time.getMonth() + 1
		    let day = time.getDate()

		    if (month < 10)
		    {
		  	  month = '0' + month
		    }

		    if (day < 10)
		    {
		  	  day = '0' + day
		    }

		    return year + '-' + month + '-' + day + ''

	    }
	    

测试实例:

 

var date = new Date(); 
var myDate = this.getDateRange(date,6,true);//获取近一周日期范围

var myDate = this.getDateRange(date,30,true);//获取近一个月日期范围

var myDate  = this.getDateRange(date,0,true);//获取今天日期范围

var myDate = this.getDateRange(date,1,true);//获取昨天日期范围

var myDate = this.getDateRange(date,6,false);//获取下一周日期范围

var myDate = this.getDateRange(date,30,false);//获取下一个月日期范围

测试结果:

### Element UI 自定义日期选择器实现方案 为了实现在 `Element UI` 中自定义日期选择器的功能,特别是支持“最七天”的快捷选项功能,可以通过以下方式完成: #### 方案概述 1. 使用 `el-date-picker` 组件中的范围选择模式 (`type="daterange"` 或者 `type="datetimerange"`) 来提供日期区间的选择。 2. 配合 JavaScript 的 `Date` 对象或者第三方库(如 dayjs[^2]),动态计算“最七天”的起始时间和结束时间。 3. 利用 `picker-options` 属性来配置快捷选项。 --- #### 实现代码示例 以下是完整的 Vue.js 和 Element UI 结合的解决方案: ```vue <template> <div> <!-- Date Picker --> <el-date-picker v-model="dateRange" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"> </el-date-picker> <p>当前选中日期范围:{{ dateRange }}</p> </div> </template> <script> export default { data() { return { dateRange: [], // 存储用户选择的日期范围 pickerOptions: { // 快捷选项配置 shortcuts: [ { text: '今天', onClick(picker) { const today = new Date(); today.setHours(0, 0, 0, 0); // 设置时间为当天零点零分零秒[^1] picker.$emit('pick', [today, today]); } }, { text: '昨天', onClick(picker) { const yesterdayStart = new Date(new Date().setDate(new Date().getDate() - 1)); yesterdayStart.setHours(0, 0, 0, 0); const yesterdayEnd = new Date(yesterdayStart.getTime()); yesterdayEnd.setHours(23, 59, 59, 999); // 昨天的最后一刻 picker.$emit('pick', [yesterdayStart, yesterdayEnd]); } }, { text: '最7天', onClick(picker) { const sevenDaysAgo = new Date(new Date().setDate(new Date().getDate() - 6)); // 获取前六天 sevenDaysAgo.setHours(0, 0, 0, 0); // 前六天的零点时刻 const now = new Date(); // 当前时间 now.setHours(23, 59, 59, 999); // 当前时间的最后一刻 picker.$emit('pick', [sevenDaysAgo, now]); // 返回日期范围 } } ] } }; } }; </script> ``` --- #### 关键点解析 1. **默认时间设置** 默认时间无法通过 `default-time` 属性生效于快捷选项时,可以手动调整 `Date` 对象的时间部分。例如,在上述代码中使用了 `setHours(0, 0, 0, 0)` 将时间重置为每天的零点。 2. **快捷选项逻辑** 在 `picker-options.shortcuts` 中定义多个快捷按钮及其点击事件回调函数。这些回调函数负责动态生成对应的日期范围并触发 `picker.$emit('pick')` 方法传递给父组件。 3. **dayjs 替代原生 Date** 如果希望简化日期操作,推荐引入轻量级工具库 `dayjs`。它可以更方便地处理日期加减运算以及格式化等问题。 --- #### 注意事项 - 确保安装最新版本的 `Element UI` 及其依赖项。 - 若项目中有国际化需求,则需额外配置语言包以适配不同地区的显示风格。 ---
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值