elementUI时间选择器

<template>//月选择器//:clearable="false" 去掉×<div class="monthCard"><el-date-picker:clearable="false"v-model="monthValue"type="month"placeholder="选择月"@change="handleChangeMonth($event)"></el-date-picker></div>//周选择器<div class="weekCard"><el-date-picker:clearable="false"v-model="dateValue"type="week":format="bill_date.date":picker-options="onPicker"placeholder="选择周"@change="showDate($event)"></el-date-picker></div>//自定义时间选择器<div class="customCard"><el-date-picker:clearable="false"v-model="pickDate"type="daterange"value-format="yyyy-MM-dd"align="right"unlink-panelsrange-separator="至":picker-options="pickerBeginDateBefore"start-placeholder="开始日期"end-placeholder="结束日期"@change='selectData'></el-date-picker></div>
</template><script>
import dayjs from 'dayjs'; //一个时间插件
import format_date from "@/utils/date_format.js"; //格式化时间
export default {name: "ThreeClearHome",data: function() {return {pickDate: ['2023-08-01','2023-09-05'], //自定义时间默认值timeOptionRange: null,pickerBeginDateBefore: {"firstDayOfWeek": 1, //选择器时间从周一开始onPick: ({maxDate, minDate}) => {if (minDate && !maxDate) {this.timeOptionRange = minDate;}if (maxDate) {this.timeOptionRange = null;}},//限制只能选择当前时间前后六个月的时间disabledDate: (time) => {// 设置六个月的时间戳let secondNum = 6 * 30 * 24 * 60 * 60 * 1000;// 获取选中时间let timeOptionRange = this.timeOptionRange;if (timeOptionRange) {return time.getTime() > timeOptionRange.getTime() + secondNum || time.getTime() < timeOptionRange.getTime() - secondNum;}}},dateValue: '', //周选择器的默认值weekStartDate: '', //起始日期weekEndDate: '', //截止日期onPicker: {"firstDayOfWeek": 1,},bill_date: {},monthValue: '', //月选择器的默认值startDate: '',endDate: '',};},props: {},computed: {},components: {},watch: {},methods: {/*按周切换*/showDate() {let vm = this;let startTime = dayjs(vm.dateValue).subtract(1, 'day').$d;let endTime = dayjs(startTime).add(6, 'day').$d;vm.weekStartDate = format_date("yyyy-MM-dd", new Date(startTime));vm.weekEndDate = format_date("yyyy-MM-dd", new Date(endTime));vm.bill_date = Object.assign({}, vm.bill_date, {'date': vm.weekStartDate + ' 至 ' + vm.weekEndDate});},// 获取当前日期的上一周getlastWeek() {let vm = this;const today = new Date(); //获取今天日期const d = today.getDay(); //计算今天是周几。如果是周天,d=0let w = 0;if (d === 0) {w = 7;} else {w = d;}const endTime = today.setDate(today.getDate() - w);const startTime = dayjs(endTime).subtract(6, 'day').$d;vm.weekEndDate = format_date("yyyy-MM-dd", new Date(endTime));vm.weekStartDate = format_date("yyyy-MM-dd", new Date(startTime));vm.dateValue = format_date("yyyy-MM-dd", new Date(startTime));vm.bill_date = Object.assign({}, vm.bill_date, {'date': vm.weekStartDate + ' 至 ' + vm.weekEndDate});},/*自定义切换*/selectData($event) {let vm = this;if ($event===null) {vm.timeOptionRange = null;vm.pickerBeginDateBefore={disabledDate: (time) => {// 设置六个月的时间戳let secondNum = 6 * 30 * 24 * 60 * 60 * 1000;// 获取选中时间let timeOptionRange = vm.timeOptionRange;if (timeOptionRange) {return time.getTime() > timeOptionRange.getTime() + secondNum || time.getTime() < timeOptionRange.getTime() - secondNum;}}};} else {vm.customStartDate = $event[0];vm.customEndDate = $event[1];}},/*按月切换*/handleChangeMonth($event) {let vm = this;let date = new Date($event);let month = (date.getMonth() + 1).toString().padStart(2, '0');let year = date.getFullYear();let startTime = year + '-' + month + '-' + '01';let day = new Date(year, month, 0);let endTime = year + '-' + month + '-' + day.getDate();vm.monthStartDate = startTime;vm.monthEndDate = endTime;},// 获取当前日期的上一个月getlastMonth() {let now = new Date();// 当前月的日期let nowDate = now.getDate();let lastMonth = new Date(now.getTime());// 设置上一个月(这里不需要减1)lastMonth.setMonth(lastMonth.getMonth());// 设置为0,默认为当前月的最后一天lastMonth.setDate(0);// 上一个月的天数let daysOflastMonth = lastMonth.getDate();// 设置上一个月的日期,如果当前月的日期大于上个月的总天数,则为最后一天lastMonth.setDate(nowDate > daysOflastMonth ? daysOflastMonth : nowDate);return lastMonth;},},created() {},mounted: function() {let vm = this;vm.monthValue = format_date("yyyy-MM", new Date(vm.getlastMonth()));vm.handleChangeMonth(vm.monthValue);vm.getlastWeek();}
};
</script>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/69521.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

音频——硬件拓扑

文章目录 硬件拓扑I2S 数据通路五线模式四线模式两线 TX两线 RX 典型应用硬件连接数据流 硬件拓扑 控制路径&#xff1a;UART/I2C/SPI数据路径&#xff1a;I2S 简略图如下 I2S 数据通路 五线模式 四线模式 两线 TX 两线 RX 典型应用 硬件连接 控制信号&#xff1a;SPI 用…

Flask狼书笔记 | 05_数据库

文章目录 5 数据库5.1 数据库的分类5.2 ORM5.3 使用Flask_SQLAlchemy5.4 数据库操作5.5 定义关系5.6 更新数据库表5.7 数据库进阶小结 5 数据库 这一章学习如何在Python中使用DBMS&#xff08;数据库管理系统&#xff09;&#xff0c;来对数据库进行管理和操作。本书使用SQLit…

SPI协议

文章目录 前言一、简介1、通信模式2、总线定义3、SPI通信结构4、SPI通讯时序5、SPI数据交互过程 二、多从机模式1、多NSS2、菊花链3、SPI通信优缺点4、UART、IIC、SPI 区别 三、总结四、参考资料 前言 SPI协议是我们的重要通信协议之一&#xff0c;我们需要掌握牢靠。 一、简介…

postgis数据库导出csv表再导入postgis

1、导出csv表 from settings_Address import * from sqlalchemy import create_engine, MetaData import pandas as pd def create_conn(Postgis_user,Postgis_password,Postgis_host,Postgis_port,dbname_PG):# return create_engine(PostgispyPostgis://{}:{}{}:{}/{}.forma…

Mysql 流程控制

简介 我们可以在存储过程和函数中实现比较复杂的业务逻辑&#xff0c;但是需要对应的流程控制语句来控制&#xff0c;就像Java中分支和循环语句一样&#xff0c;在MySQL中也提供了对应的语句&#xff0c;接下来就详细的介绍下。 1.分支结构 1.1 IF语句 IF 表达式1 THEN 操作1…

Android MQTT:实现设备信息上报与远程控制

Android MQTT&#xff1a;实现设备信息上报与远程控制 1. 介绍 1.1 MQTT是什么&#xff1f; MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级的消息传输协议&#xff0c;最初由IBM开发&#xff0c;用于连接远程设备与服务器之间的通信。它在物…

尚硅谷SpringMVC (9-13)

九、HttpMessageConverter HttpMessageConverter &#xff0c;报文信息转换器&#xff0c;将请求报文转换为 Java 对象&#xff0c;或将 Java 对象转换为响应报文 HttpMessageConverter提供了两个注解和两个类型&#xff1a; RequestBody &#xff0c; ResponseBody &#xff…

手写Mybatis:第20章-Mybatis 框架源码10种设计模式分析

文章目录 一、类型&#xff1a;创建型模式1.1 工厂模式1.2 单例模式1.3 建造者模式 二、类型&#xff1a;结构型模式2.1 适配器模式2.2 代理模式2.3 组合模式2.4 装饰器模式 三、类型&#xff1a;行为型模式3.1 模板模式3.2 策略模式3.3 迭代器模式 一、类型&#xff1a;创建型…

HashMap源码分析(JDK1.8)

概述 JDK 1.8 对 HashMap 进行了比较大的优化&#xff0c;底层实现由之前的 “数组链表” 改为 “数组链表红黑树”&#xff0c;本文就 HashMap 的几个常用的重要方法和 JDK 1.8 之前的死循环问题展开学习讨论。 JDK 1.8 的 HashMap 的数据结构如下图所示&#xff0c;当链表节…

Elasticsearch Head的使用

目录 概述一、安装 Elasticsearch Head二、解压文件三、安装Elasticsearch Head依赖四、启动 Elasticsearch Head五、修改Elasticsearch Head启动端口号六、使用 Elasticsearch Head注意事项 概述 Elasticsearch Head 是一个用于管理和监控 Elasticsearch 集群的 Web 界面工具…

【Linux】Ubuntu20.04版本配置pytorch环境2023.09.05【教程】

【Linux】Ubuntu20.04版本配置pytorch环境2023.09.05【教程】 文章目录 【Linux】Ubuntu20.04版本配置pytorch环境2023.09.05【教程】一、安装Anaconda虚拟环境管理器二、创建虚拟环境并激活三、安装Pytorch四、测试pytorchReference 一、安装Anaconda虚拟环境管理器 首先进入…

Ubuntu18.04系统下通过ROS控制Kinova真实机械臂-多种实现方式

所用测试工作空间test_ws&#xff1a;包含官网最原始的功能包 一、使用Kinova官方Development center控制真实机械臂 0.在ubuntu系统安装Kinova机械臂的Development center&#xff0c;这一步自行安装&#xff0c;很简单。 1.使用USB连接机械臂和电脑 2.Development center…

typescript删除array中的空值

使用.flat() 可以看到&#xff0c;调用之后空值被清清除了&#xff0c;如果本身就是1维数组就无所谓&#xff0c;但如果本身是多维数组&#xff0c;又不想数组维度被改变的话就需要传入0&#xff0c;才不会导致数据维度改变

Webpack5入门到原理

Webpack5学习 尚硅谷Webpack5新版视频教程 B站直达&#xff1a;https://www.bilibili.com/video/BV14T4y1z7sw 百度网盘&#xff1a;https://pan.baidu.com/s/114lJRGua2uHBdLq_iVLOOQ 提取码&#xff1a;yyds 阿里云盘&#xff1a;https://www.aliyundrive.com/s/UMkmCzdWsGh&…

[数据集][目标检测]裸土识别裸土未覆盖目标检测数据集VOC格式857张2类别

数据集格式&#xff1a;Pascal VOC格式(不包含分割路径的txt文件和yolo格式的txt文件&#xff0c;仅仅包含jpg图片和对应的xml) 图片数量(jpg文件个数)&#xff1a;857 标注数量(xml文件个数)&#xff1a;857 标注类别数&#xff1a;2 标注类别名称:["luotu","n…

【小沐学Unity3d】3ds Max 骨骼动画制作(CAT、Character Studio、Biped、骨骼对象)

文章目录 1、简介2、 CAT2.1 加载 CATRig 预设库2.2 从头开始创建 CATRig 3、character studio3.1 基本描述3.2 Biped3.3 Physique 4、骨骼系统4.1 创建方法4.2 简单示例 结语 1、简介 官网地址&#xff1a; https://help.autodesk.com/view/3DSMAX/2018/CHS https://help.aut…

2021年09月 C/C++(六级)真题解析#中国电子学会#全国青少年软件编程等级考试

C/C++编程(1~8级)全部真题・点这里 第1题:双端队列 定义一个双端队列,进队操作与普通队列一样,从队尾进入。出队操作既可以从队头,也可以从队尾。编程实现这个数据结构。 时间限制:1000 内存限制:65535 输入 第一行输入一个整数t,代表测试数据的组数。 每组数据的第一…

【广州华锐互动】煤矿设备AR远程巡检系统实现对井下作业的远程监控和管理

煤矿井下作业环境复杂&#xff0c;安全隐患较多。传统的巡检方式存在诸多弊端&#xff0c;如巡检人员难以全面了解井下情况&#xff0c;巡检效率低下&#xff0c;安全隐患难以及时发现和整改等。为了解决这些问题&#xff0c;提高煤矿安全生产水平&#xff0c;越来越多的企业开…

DAY01_瑞吉外卖——软件开发整体介绍瑞吉外卖项目介绍开发环境搭建后台系统登录功能后台系统退出功能

目录 1. 软件开发整体介绍1.1 软件开发流程1.2 角色分工1.3 软件环境 2. 瑞吉外卖项目介绍2.1 项目介绍2.2 产品原型2.3 技术选型2.4 功能架构2.5 角色 3. 开发环境搭建3.1 数据库环境搭建3.1.1 创建数据库3.1.2 数据库表导入3.1.3 数据库表介绍 3.2 Maven项目搭建3.2.1 创建ma…

Elsaticsearch倒排索引

搜索引擎应该具有什么要求&#xff1f; 查询快 高效的压缩算法 快速的编码和解码速度 结果准确 BM25 TF-IDF 检索结果丰富 召回率 面向海量数据&#xff0c;如何达到搜索引擎级别的查询效率&#xff1f; 索引 帮助快速检索以数据结构为载体以文件形式落地 倒排…