日期时间选择器——el-date-picker设置默认时间

86 篇文章 0 订阅
73 篇文章 0 订阅

el-date-picker

设置默认时间范围为前一个小时
处理日期时间格式:

// 参数timer是过去的n个小时
export function getPastTime(timer) {
  // 获取过去的时间
  const lastTime = new Date().getTime() - `${timer * 60 * 60 * 1000}`;
  const startTime = timeFormat(lastTime);
  // 当前时间时间
  let time = new Date().getTime();
  const endTime = timeFormat(time);
  return [startTime, endTime];
}

//时间生成并处理
function timeFormat(time) {
  // 对应的方法
  const timeType = [
    "getFullYear",
    "getMonth",
    "getDate",
    "getHours",
    "getMinutes",
    "getSeconds"
  ];
  // 分隔符
  const separator = {
    getFullYear: "-",
    getMonth: "-",
    getDate: " ",
    getHours: ":",
    getMinutes: ":",
    getSeconds: ""
  };
  let resStr = "";
  for (let i = 0; i < timeType.length; i++) {
    const element = timeType[i];
    let resTime = new Date(time)[element]();
    // 获取月份的要+1
    resTime = element == "getMonth" ? resTime + 1 : resTime;
    // 小于10,前面加0
    resTime = resTime > 9 ? resTime : "0" + resTime;
    resStr = resStr + resTime + separator[element];
  }
  return resStr;
}

组件使用:

<el-date-picker v-model="datetimerange" type="datetimerange" 
	align="right" start-placeholder="开始时间" end-placeholder="结束时间" 
	format='yyyy-MM-dd HH:mm:ss' value-format='yyyy-MM-dd HH:mm:ss'>
</el-date-picker>

//默认显示前三个月
datetimerange = getPastTime(1)

效果图:
在这里插入图片描述

在这里插入图片描述

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值