element时间选择器的默认值

news/2024/3/29 15:29:22/文章来源:https://blog.csdn.net/weixin_45024453/article/details/131996995

概览:vue使用element组件,需要给时间选择器设置默认值,场景一:默认时间选择器,场景二:时间范围选择器,开始时间和结束时间。

一、默认时间选择器

实现思路:

element组件的v-model绑定的数据变化,则时间选择器的默认值变化。可以在生命周期mounted() 或者 onMounted()组件挂载时进行赋值。

实现代码:

1.1布局:

<div class="search_right"><div class="echart1_titleBox">时间:</div><div class="searchInnerBox"><el-date-picker v-model="data.crewOverViewTime" type="date" value-format="YYYY-MM-DD"placeholder="请选择" clearable :default-value="new Date()"@change="handleChangeTime" /></div>
</div>

1.2逻辑: 

/** * 默认选中当前时间*/
let defalutTime = replaceTime(new Date());
data.crewOverViewTime = defalutTime
const replaceTime = (date) => {// 获取当前月份let nowMonth = date.getMonth() + 1;// 获取当前是几号let strDate = date.getDate();// 添加分隔符“-”let seperator = "-";// 对月份进行处理,1-9月在前面添加一个“0”if (nowMonth >= 1 && nowMonth <= 9) {nowMonth = "0" + nowMonth;}// 对月份进行处理,1-9号在前面添加一个“0”if (strDate >= 0 && strDate <= 9) {strDate = "0" + strDate;}// 最后拼接字符串,得到一个格式为(yyyy-MM-dd)的日期let nowDate = date.getFullYear() + seperator + nowMonth + seperator + strDate;return nowDate;
};

1.3效果展示

二、时间范围选择器

实现思路:

element组件的v-model绑定数据,在组件挂载的生命周期onMounted()进行赋值。注意:时间范围选择器的v-modle绑定的动态数据data是一个数组,数组索引=0是开始时间,数组索引=1是结束时间。

实现代码:

1.1页面:

<div class="searchTimerBox"><div class="searchTimerBox_titleBox">时间:</div><div class="searchInnerBox"><el-date-picker v-model="data.valueTwoTimer" type="monthrange" value-format="YYYY-MM"range-separator="到" start-placeholder="开始时间" end-placeholder="结束时间":unlink-panels="true" @change="handleChangeTime" /></div>
</div>

1.2逻辑:

/*** 默认选中此月往前推的12个月*/
const getTimerPiker = () => {let newData = new Date()let seperator = "-";let nowMonth = newData.getMonth() + 1if (nowMonth >= 1 && nowMonth <= 9) {nowMonth = "0" + nowMonth;}nowMonth = newData.getFullYear() + seperator + nowMonth;const beforeMonth = minDate(newData, 11)data.valueTwoTimer.push(beforeMonth)data.valueTwoTimer.push(nowMonth)
}
//获取当前日期的 前n个月
const minDate = (_nowDate,_latestMonth) => {_nowDate.setMonth(_nowDate.getMonth() - _latestMonth)let year = _nowDate.getFullYear();let month = (_nowDate.getMonth() + 1).toString().padStart(2, '0');let time = year + '-' + monthreturn time
};

1.3效果展示

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

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

相关文章

DevOps-Jenkins

Jenkins Jenkins是一个可扩展的持续集成引擎&#xff0c;是一个开源软件项目&#xff0c;旨在提供一个开放易用的软件平台&#xff0c;使软件的持续集成变成可能。 官网 应用场景 场景一 研发人员上传开发好的代码到github代码仓库需要将代码下载nginx服务器部署手动下载再…

数值线性代数:奇异值分解SVD

本文记录计算矩阵奇异值分解SVD的原理与流程。 注1&#xff1a;限于研究水平&#xff0c;分析难免不当&#xff0c;欢迎批评指正。 零、预修 0.1 矩阵的奇异值 设列满秩矩阵&#xff0c;若的特征值为&#xff0c;则称为矩阵的奇异值。 0.2 SVD(分解)定理 设&#xff0c;则…

Open3D-ML自动驾驶点云目标检测与分割入门

当开始新的研究时&#xff0c;我的方法通常是测试不同的相关事物&#xff0c;直到有足够的经验让我开始将这些点联系起来。 在开始构建用于 3D 对象检测的自定义模型之前&#xff0c;我购买了一台 LiDAR 并处理了一些数据。 下一个明显的步骤是在我为自己的数据贴标签之前找出研…

SpringCloudAlibaba之Ribbon

Ribbon是nacos自带的负载均衡器&#xff0c;属于客户端的负载均衡 但是在Spring高级版本中让LoadBalancer替代了 本人用的是2.1.0的nacos&#xff0c;ribbon还没有被替换。 使用&#xff1a; 在配置类中&#xff1a;LoadBalanced BeanLoadBalancedpublic RestTemplate restT…

ChatGPT长文本对话输入方法

ChatGPT PROMPTs Splitter 是一个开源工具&#xff0c;旨在帮助你将大量上下文数据分成更小的块发送到 ChatGPT 的提示&#xff0c;并根据如何处理所有块接收到 ChatGPT&#xff08;或其他具有字符限制的语言模型&#xff09;的方法。 推荐&#xff1a;用 NSDT设计器 快速搭建可…

【FPGA IP系列】FIFO的通俗理解

FPGA厂商提供了丰富的IP核&#xff0c;基础性IP核都是可以直接免费调用的&#xff0c;比如FIFO、RAM等等。 本文主要介绍FIFO的一些基础知识&#xff0c;帮助大家能够理解FIFO的基础概念。 一、FIFO介绍 FIFO全称是First In First Out&#xff0c;即先进先出。 FIFO是一个数…

怎么选择合适的微信管理系统?

稳定好用的网页版微信CRM系统&#xff0c;随时随地可以登录&#xff0c;不用安排插件软件&#xff0c;不限制手机和电脑使用&#xff0c;电脑手机关机消息都是实时同步的 还有很多功能&#xff1a; 1、聚合聊天&#xff1a;支持多个微信号登录到系统上&#xff0c;一个页面就可…

WIZnet W51000S-EVB-PICO 入门教程(一)

概述 W5100S-EVB-Pico是基于树莓派RP2040和全硬件TCP/IP协议栈控制器W5100S的微控制器开发板-基本上与树莓派Pico板相同&#xff0c;但通过W5100S芯片增加了以太网功能。 W5100S-EVB-Pico特点 RP2040规格参数 双核Arm Cortex-M0 133MHz264KB 高速SRAM和2MB板载内存通过…

【计算机视觉中的 GAN 】 - 生成学习简介(1)

一、说明 在阅读本文之前&#xff0c;强烈建议先阅读预备知识&#xff0c;否则缺乏必要的推理基础。本文是相同理论GAN原理的具体化范例&#xff0c;阅读后有两个好处&#xff1a;1 巩固了已经建立的GAN基本概念 2 对具体应用的过程和套路进行常识学习&#xff0c;这种练习题一…

RocketMQ概论

目录 前言&#xff1a; 1.概述 2.下载安装、集群搭建 3.消息模型 4.如何保证吞吐量 4.1.消息存储 4.1.1顺序读写 4.1.2.异步刷盘 4.1.3.零拷贝 4.2.网络传输 前言&#xff1a; RocketMQ的代码示例在安装目录下有全套详细demo&#xff0c;所以本文不侧重于讲API这种死…

四种刷题模式的爱刷题无后端无数据库刷题应用网站H5源码

四种刷题模式的爱刷题无后端无数据库刷题应用网站H5源码。提供了简单轻量化的部署方式和详细的四种刷题模式教程。该应用使用JSON作为题库的存储方式&#xff0c;层次清晰、结构简单易懂。 配套的word模板和模板到JSON转换工具可供使用&#xff0c;方便将题库从word格式转换为…

抖音seo短视频账号矩阵系统技术开发简述

说明&#xff1a;本开发文档适用于抖音seo源码开发&#xff0c;抖音矩阵系统开发&#xff0c;短视频seo源码开发&#xff0c;短视频矩阵系统源码开发 一、 抖音seo短视频矩阵系统开发包括 抖音seo短视频账号矩阵系统的技术开发主要包括以下几个方面&#xff1a; 1.前端界面设…

SpringBoot的三层架构以及IOCDI

目录 一、IOC&DI入门 二、三层架构 数据库访问层 业务逻辑层 控制层 一、IOC&DI入门 在软件开发中&#xff0c;IOC&#xff08;Inversion of Control&#xff09;和DI&#xff08;Dependency Injection&#xff09;是密切相关的概念。 IOC&#xff08;控制反转&a…

【每日一题】141. 环形链表

【每日一题】141. 环形链表 【每日一题】141. 环形链表题目描述解题思路 【每日一题】141. 环形链表 题目描述 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环…

37 coredump 的生成和使用

前言 呵呵 coredump 之前对于我而言也是一个挺陌生的概念 但是 只从开始了 linux 的相关学习之后, 对于这个 概念也有了一些 理解 呵呵 这里 以一些 简单的例子 来看一下 coredump 的生成和使用 首先执行 "ulimit -c unlimited" 测试用例1 - 除数为 0 root…

【TypeScript】TS入门级基础学习(一)

【TypeScript】TS入门级基础学习&#xff08;一&#xff09; 一、前言 TypeScript 是一种用于应用程序规模的 JavaScript 语言。 TypeScript 向 JavaScript 添加了可选类型&#xff0c;支持用于任何浏览器、任何主机、任何操作系统的大规模 JavaScript 应用程序的工具。 Type…

Spark(37):Streaming DataFrame 和 Streaming DataSet 创建

目录 0. 相关文章链接 1. 概述 2. socket source 3. file source 3.1. 读取普通文件夹内的文件 3.2. 读取自动分区的文件夹内的文件 4. kafka source 4.1. 导入依赖 4.2. 以 Streaming 模式创建 Kafka 工作流 4.3. 通过 Batch 模式创建 Kafka 工作流 5. Rate Source…

2023牛客暑期多校-J-Qu‘est-ce Que C‘est?(DP)

题意&#xff1a; 给定长度为n的数列,要求每个数都在的范围&#xff0c;且任意长度大于等于2的区间和都大于等于0&#xff0c;问方案数。。 思路&#xff1a; 首先要看出是dp题&#xff0c;用来表示遍历到第i位且后缀和最小为x的可行方案数&#xff08;此时的后缀可以只有最…

Java 版 spring cloud +spring boot 工程系统管理 工程项目管理系统源码 工程项目各模块及其功能点清单

工程项目各模块及其功能点清单 一、系统管理 1、数据字典&#xff1a;实现对数据字典标签的增删改查操作 2、编码管理&#xff1a;实现对系统编码的增删改查操作 3、用户管理&#xff1a;管理和查看用户角色 4、菜单管理&#xff1a;实现对系统菜单的增删改查操…

linux下nginx的安装和使用

文章目录 &#x1f4d2;安装nginx正常使用nginx包安装1️⃣上传到对应目录2️⃣解压nginx3️⃣检查是否启动成功 使用docker安装nginx &#x1f4d2;使用nginx1️⃣简单的反向代理2️⃣介绍location配置中root和alias的区别 &#x1f4d2;安装nginx 正常使用nginx包安装 官网…