日期切换

在这里插入图片描述

组件:
<template><div class="time-picker"><el-radio-group size="small" v-model="timeType" @change="changePickerType"><el-radio-button label="hour" v-if="isShow"></el-radio-button><el-radio-button label="day"></el-radio-button><el-radio-button label="month"></el-radio-button><el-radio-button label="quarter"></el-radio-button><el-radio-button label="year"></el-radio-button></el-radio-group><el-date-picker v-if="timeType != 'year' && timeType != 'quarter'" v-model="timeList" :type="pickerType[timeType].type" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width: 300px" value-format="timestamp" :clearable="false" :format="pickerType[timeType].format" @change="changeDatePicker" class="select-time" popper-class="time-popper" :default-time="['00:00:00', '23:00:00']"></el-date-picker><YearYear1 v-if="timeType == 'year'" style="width:300px" :initYear="dateValue2" @updateTimeRange="updateStatisticYear" /><QuarterTime v-if="timeType == 'quarter'" @getQuarter="getQuarter"></QuarterTime></div>
</template><script>
import YearYear1 from "@/components/YearYear1";
import QuarterTime from "@/components/QuarterTime";
export default {model: {prop: "times",event: "updatetimes",},props: {times: {type: Array,},isShow: {type: Boolean,default: true,},},components: {YearYear1,QuarterTime,},data() {return {timeType: "hour",timeList: [],yearTime: [],dateValue2: [],pickerType: {hour: {type: "datetimerange",format: "yyyy-MM-dd HH时",},day: {type: "daterange",},month: {type: "monthrange",},quarter: {type: "quarter",},year: {type: "year",},},};},methods: {changePickerType(type) {let dayType = {month: {type: "years",count: 1,},day: {type: "days",count: 3,},hour: {type: "days",count: 3,},quarter: {type: "quarter",count: 1,},year: {type: "years",count: 2,},};//   var moment = require("moment");//   const startDay = moment()//     .subtract(dayType[type].count, dayType[type].type)//     .format("YYYY-MM-DD HH:00:00");//   const endDay = moment().format("YYYY-MM-DD HH:00:00");//   this.timeList = [//     new Date(startDay).getTime(),//     new Date(endDay).getTime(),//   ];this.timeList = [];this.yearTime = this.timeList;//   this.$emit("updatetimes", this.timeList);},isNull(value) {if (value) {return false;}return true;},//获取季度子组件传回的数据getQuarter(val) {console.log("季节:", val);},// 选择年updateStatisticYear(val) {console.log("年", val);},changeDatePicker(e) {console.log("选择:", e);this.$emit("updatetimes", e);},},
};
</script><style lang="scss" scoped>
.time-picker {display: flex;
}.time-popper {.el-time-spinner {display: flex;justify-content: center;& > :nth-child(2) {display: none;}}.el-picker-panel__footer {& > :first-child {display: none;}}
}
.el-radio-group {margin-right: 10px;
}
.year-picker {line-height: 28px;
}
::v-deep .el-radio-button--small .el-radio-button__inner {height: 36px;line-height: 18px;
}
::v-deep .el-range-editor--small.el-input__inner {height: 36px;line-height: 18px;
}
::v-deep .el-range-editor--small .el-range__icon {line-height: 30px;
}
</style>
里面的年(YearYear1)和季度(QuarterTime)组件是前面分享的文章:
标题:年至年的选择仿elementui的样式、仿真elementUI的时间选择的季度选择
引入即可
使用:
<SelectTimePicker :isShow="false" @updatetimes="updatetimes"></SelectTimePicker>import SelectTimePicker from "@/components/SelectTimePicker/index.vue";
components: { SelectTimePicker },updatetimes(val) {console.log("点击:", val);
},

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

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

相关文章

Vue [Day7] 综合案例

核心概念回顾 state&#xff1a;提供数据 getters&#xff1a;提供与state相关的计算属性 mutations&#xff1a;提供方法&#xff0c;用于修改state actions&#xff1a;存放异步操作 modules&#xff1a;存模块 功能分析 https://www.npmjs.com/package/json-server#ge…

如何学习大数据

文章目录 每日一句正能量前言一、什么是大数据二、大数据的应用领域三、社会对大数据的人才需求四、大数据的学习路线后记 每日一句正能量 多数人认为&#xff0c;一旦达到某个目标&#xff0c;人们就会感到身心舒畅。但问题是你可能永远达不到目标。把快乐建立在还不曾拥有的事…

OpenCV实例(八)车牌字符识别技术(二)字符识别

车牌字符识别技术&#xff08;二&#xff09;字符识别 1.字符识别原理及其发展阶段2.字符识别方法3.英文、数字识别4.车牌定位实例 1.字符识别原理及其发展阶段 匹配判别是字符识别的基本思想&#xff0c;与其他模式识别的应用非常类似。字符识别的基本原理就是对字符图像进行…

JavaScript 操作历史记录api怎样使用 JavaScript

JavaScript 操作历史记录api怎样使用 JavaScript History 是 window 对象中的一个 JavaScript 对象&#xff0c;它包含了关于浏览器会话历史的详细信息。你所访问过的 URL 列表将被像堆栈一样存储起来。浏览器上的返回和前进按钮使用的就是 history 的信息。 History 对象包含…

WeiSpeechSynthesizer.java

目录 1 WeiSpeechSynthesizer.java 1.1 onSpeakProgress 1.2 onSpeakPaused 1.3 onCompleted WeiSpeechSynthesizer.javainitListener private InitListener initListener=new InitListener() {@Override

【数据结构和算法】位图 BitMap

1. 位图结构的实现 /*** 位图数据类型 <br />* 位图以字节的一位为单位进行元素的操作&#xff0c;但是位运算以一个字节整体为运算单位&#xff0c;因此代码中以 bytes[index] 进行运算。* 位图元素的添加即找到相应的位置&#xff0c;将其置为1&#xff0c;实现时将该…

Redis_五种数据类型及操作命令

5.redis常用的五种数据类型 5.1 Redis String字符串 5.1.1 简介 String类型在redis中最常见的一种类型string类型是二制安全的&#xff0c;可以存放字符串、数值、json、图像数据value存储最大数据量是512M 5.1.2 常用命令 set < key>< value>&#xff1a;添加…

构造函数——初始化列表

初始化列表的引入。 #include<iostream> using namespace std;//栈类 typedef int DataType; class Stack { public://默认构造&#xff1a;Stack(size_t capacity ){cout << "Stack()" << endl;_array (DataType*)malloc(sizeof(DataType) * ca…

【golang】怎样判断一个变量的类型?

怎样判断一个变量的类型&#xff1f; package mainimport "fmt"var container []string{"zero", "one", "two"} func main() {container : map[int]string{0: "zero", 1: "one", 2: "two"}fmt.Printf…

享元模式(C++)

定义 运用共享技术有效地支持大量细粒度的对象。 使用场景 在软件系统采用纯粹对象方案的问题在于大量细粒度的对象会很快充斥在系统中&#xff0c;从而带来很高的运行时代价——主要指内存需求方面的代价。如何在避免大量细粒度对象问题的同时&#xff0c;让外部客户程序仍…

JavaWeb过滤器

目录 接口中的方法 init destroy doFilter 在web.xml中配置 作用 Filter也称之为过滤器&#xff0c;它是Servlet技术中最实用的技术&#xff0c;WEB开发人员通过 Filter技术&#xff0c;对web服务器管理的所有web资源&#xff1a;例如Servlet, 从而实现一些 特殊的功能。…

虚拟ip地址软件 怎么修改自己的网络ip地址

修改自己的网络IP地址在日常生活中&#xff0c;有时候我们可能需要修改自己的网络IP地址&#xff0c;这可能是由于网络问题、安全性考虑、建议使用第三方深度ip转换器切换ip地址。不用担心&#xff0c;下面将为大家介绍几种常见的修改网络IP地址的方法。 1. 通过重新连接网络&a…

128.【Maven】

Maven仓库 (一)、Maven 简介1.传统项目管理的缺点2.Maven是什么3.Maven的作用 (二)、Maven 的下载与安装1.下载与认识目录2.配置Maven的全局环境 (三)、Maven 的基础概念1.Maven 仓库(1).仓库分类 2. Maven 坐标3.Maven 本地仓库配置(1).改变默认的仓库地址(2).改变远程仓库地址…

mac电脑 node 基本操作命令

1. 查看node的版本 node -v2. 查看可安装的node版本 sudo npm view node versions3. 安装指定版本的node sudo n 18.9.04. 安装最新版本node sudo n latest5. 安装最新稳定版 sudo n stable6. 清楚node缓存 sudo npm cache clean -f7. 列举已经安装的node版本 n ls 8. 在…

代码随想录算法训练营第46天| 139.单词拆分 关于多重背包,你该了解这些! 背包问题总结篇!

今日学习的文章链接&#xff0c;或者视频链接 第九章 动态规划part08 自己看到题目的第一想法 看完代码随想录之后的想法 139: class Solution { public:bool wordBreak(string s, vector<string>& wordDict) {unordered_set<string> wordSet(wordDict.b…

【并发编程】无锁环形队列Disruptor并发框架使用

Disruptor 是苹国外厂本易公司LMAX开发的一个高件能列&#xff0c;研发的初夷是解决内存队列的延识问顾在性能测试中发现竟然与10操作处于同样的数量级)&#xff0c;基于Disruptor开发的系统单线程能支撑每秒600万订单&#xff0c;2010年在QCn演讲后&#xff0c;获得了业界关注…

c++11-14-17_内存管理(RAII)_多线程

文章目录 前言&#xff1a;什么是RAII&#xff1f;指针/智能指针&#xff1a;使用智能指针管理内存资源&#xff1a;unique_ptr的使用&#xff1a;自定义删除器&#xff1a; shared_ptr的使用&#xff1a;shared_ptr指向同一个对象的不同成员&#xff1a;自定义删除函数&#x…

期权定价模型系列【2】—期权的希腊字母计算及应用

本篇文章旨在介绍期权常见希腊字母的计算及应用 本专栏更多侧重于理论及文字方面的展示&#xff0c;文章具体的代码可以参考我的另一个专栏【期权量化】。 【期权量化】专栏有同名文章&#xff0c;并且给出了文章的具体代码。 专栏地址&#xff1a; http://t.csdn.cn/Y30Hk…

谈谈Java开发语言

目录 1.概念 2.特点 3.应用领域 4.就业情况 1.概念 Java是一种面向对象的编程语言&#xff0c;它由James Gosling和他的团队在1995年于Sun Microsystems&#xff08;现在是Oracle Corporation&#xff09;开发出来。Java的设计目标是让开发者能够编写一次代码&#xff0c;在…

Arcgis中POI找到建筑面内距离最近的标准地址通过模型构建器来实现

背景 之前写过一篇文章 Arcgis通过矢量建筑面找到POI对应的标准地址 这里面的大致思路跟本篇文章是类似的&#xff0c;不过上一篇文章有部分有瑕疵&#xff0c;就是在POI去找建筑面内的标准地址时&#xff0c;找到的虽然是建筑面内的&#xff0c;但是不一定是距离最近的&#…