element 自定义 本日 本周 本月 本年 昨日 两种方法

2024-03-28 13:58

本文主要是介绍element 自定义 本日 本周 本月 本年 昨日 两种方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1:

通过pickerOptionstime实现

 

<template><div><el-formclass="myForm":inline="true":model="tableParam"label-position="right"size="small":label-width="width"><el-form-item :label="title"><el-date-pickerv-model="value1"type="daterange"align="right"@change="timeclick"unlink-panelsrange-separator="至"start-placeholder="开始日期"end-placeholder="结束日期":picker-options="pickerOptionstime"></el-date-picker></el-form-item></el-form></div>
</template><script>
export default {props: {timeConb: null,title: {type: String,default: "",},width: {type: String,default: "80px",},},data() {return {value1: "",pickerOptionstime: {shortcuts: [{text: "昨日",onClick(picker) {let endday =new Date(new Date().toLocaleDateString()).getTime() - 86400000;picker.$emit("pick", [endday, endday]);},},{text: "本周",onClick(picker) {let daytime =new Date().getTime() -new Date(new Date().toLocaleDateString()).getTime();var startStop = new Array();//一天的毫秒数var millisecond = 1000 * 60 * 60 * 24;//获取当前时间var currentDate = new Date();//相对于当前日期AddWeekCount个周的日期currentDate = new Date(currentDate.getTime() + millisecond * 7 * 0);//返回date是一周中的某一天var week = currentDate.getDay();//返回date是一个月中的某一天var month = currentDate.getDate();//减去的天数var minusDay = week != 0 ? week - 1 : 6;//获得当前周的第一天var currentWeekFirstDay = new Date(currentDate.getTime() - millisecond * minusDay);//获得当前周的最后一天var currentWeekLastDay = new Date(currentWeekFirstDay.getTime() + millisecond * 6);let start = currentWeekFirstDay.getTime() - daytime;let endday = currentWeekLastDay.getTime() - daytime + 86399999;picker.$emit("pick", [start, endday]);},},{text: "本月",onClick(picker) {//起止日期数组var startStop = new Array();//获取当前时间var currentDate = new Date();var month = currentDate.getMonth() + 0;if (month < 0) {var n = parseInt(-month / 12);month += n * 12;currentDate.setFullYear(currentDate.getFullYear() - n);}currentDate = new Date(currentDate.setMonth(month));//获得当前月份0-11var currentMonth = currentDate.getMonth();//获得当前年份4位年var currentYear = currentDate.getFullYear();//获得上一个月的第一天var currentMonthFirstDay = new Date(currentYear, currentMonth, 1);//获得上一月的最后一天var currentMonthLastDay = new Date(currentYear,currentMonth + 1,0);this.purchaseDate = [];let start = currentMonthFirstDay.getTime();let end = currentMonthLastDay.getTime() + 86399999;picker.$emit("pick", [start, end]);},},{text: "本年",onClick(picker) {var now = new Date();var now_year = now.getFullYear();var YearStart = new Date(now_year, 0, 1);var YearEnd = new Date(new Date(now_year + 1, 1, 1).getTime() - 1000 * 60 * 60 * 24);this.purchaseDate = [];let start = YearStart.getTime();let end = YearEnd.getTime() - 2592000000 - 1;picker.$emit("pick", [start, end]);},},],},timeStatuss: "",timeStatus: 4,tableParam: {},};},computed: {},methods: {timeclick() {this.$emit("timeConb", this.value1);},cleartime() {this.timeStatus = 4;this.value1=''},tiemclick2() {this.timeStatus = 6;},},activated() {},mounted() {},
};
</script>
<style scoped>
</style>

2:

与上类似的

两份代码上传资源

这篇关于element 自定义 本日 本周 本月 本年 昨日 两种方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/855802

相关文章

Python安装Pandas库的两种方法

《Python安装Pandas库的两种方法》本文介绍了三种安装PythonPandas库的方法,通过cmd命令行安装并解决版本冲突,手动下载whl文件安装,更换国内镜像源加速下载,最后建议用pipli... 目录方法一:cmd命令行执行pip install pandas方法二:找到pandas下载库,然后

Linux系统中查询JDK安装目录的几种常用方法

《Linux系统中查询JDK安装目录的几种常用方法》:本文主要介绍Linux系统中查询JDK安装目录的几种常用方法,方法分别是通过update-alternatives、Java命令、环境变量及目... 目录方法 1:通过update-alternatives查询(推荐)方法 2:检查所有已安装的 JDK方

SQL Server安装时候没有中文选项的解决方法

《SQLServer安装时候没有中文选项的解决方法》用户安装SQLServer时界面全英文,无中文选项,通过修改安装设置中的国家或地区为中文中国,重启安装程序后界面恢复中文,解决了问题,对SQLSe... 你是不是在安装SQL Server时候发现安装界面和别人不同,并且无论如何都没有中文选项?这个问题也

springboot自定义注解RateLimiter限流注解技术文档详解

《springboot自定义注解RateLimiter限流注解技术文档详解》文章介绍了限流技术的概念、作用及实现方式,通过SpringAOP拦截方法、缓存存储计数器,结合注解、枚举、异常类等核心组件,... 目录什么是限流系统架构核心组件详解1. 限流注解 (@RateLimiter)2. 限流类型枚举 (

Java Thread中join方法使用举例详解

《JavaThread中join方法使用举例详解》JavaThread中join()方法主要是让调用改方法的thread完成run方法里面的东西后,在执行join()方法后面的代码,这篇文章主要介绍... 目录前言1.join()方法的定义和作用2.join()方法的三个重载版本3.join()方法的工作原

SpringBoot 异常处理/自定义格式校验的问题实例详解

《SpringBoot异常处理/自定义格式校验的问题实例详解》文章探讨SpringBoot中自定义注解校验问题,区分参数级与类级约束触发的异常类型,建议通过@RestControllerAdvice... 目录1. 问题简要描述2. 异常触发1) 参数级别约束2) 类级别约束3. 异常处理1) 字段级别约束

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分

Spring Boot从main方法到内嵌Tomcat的全过程(自动化流程)

《SpringBoot从main方法到内嵌Tomcat的全过程(自动化流程)》SpringBoot启动始于main方法,创建SpringApplication实例,初始化上下文,准备环境,刷新容器并... 目录1. 入口:main方法2. SpringApplication初始化2.1 构造阶段3. 运行阶

Olingo分析和实践之ODataImpl详细分析(重要方法详解)

《Olingo分析和实践之ODataImpl详细分析(重要方法详解)》ODataImpl.java是ApacheOlingoOData框架的核心工厂类,负责创建序列化器、反序列化器和处理器等组件,... 目录概述主要职责类结构与继承关系核心功能分析1. 序列化器管理2. 反序列化器管理3. 处理器管理重要方

Python错误AttributeError: 'NoneType' object has no attribute问题的彻底解决方法

《Python错误AttributeError:NoneTypeobjecthasnoattribute问题的彻底解决方法》在Python项目开发和调试过程中,经常会碰到这样一个异常信息... 目录问题背景与概述错误解读:AttributeError: 'NoneType' object has no at