element时间选择器的默认值

概览: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.mzph.cn/news/13589.shtml

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

相关文章

“深入探究Spring Boot:从入门到精通“

标题&#xff1a;深入探究Spring Boot&#xff1a;从入门到精通 摘要&#xff1a;本文将介绍Spring Boot框架的基本概念和特点&#xff0c;以及详细讲解如何使用Spring Boot进行快速开发。通过深入学习Spring Boot的各个方面&#xff0c;读者将能够全面掌握这个强大的开发框架…

忘记安卓图案/密码锁如何解锁?

如何解锁Android手机图案锁&#xff1f;如何删除忘记的密码&#xff1f;Android 手机锁定后如何重置&#xff1f;这是许多智能手机用户在网上提出的几个问题。为了回答这些问题&#xff0c;我们想出了一些简单有效的方法来解锁任何设备而不丢失数据。 忘记手机密码可能会令人恐…

Git基础入门

git基础入门 Git是一款免费、开源的分布式 版本控制系统 &#xff0c;用于敏捷高效地处理任何或小或大的项目。 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 git的安装 下载地址 注意&#xff1a; 不要安装在中文目录不要使用桌…

web服务器(Tomcat)

目录 一、web服务器 1. 常见web服务器 2. web服务器简介 二、 Apache Tomcat服务器 1. Tomcat服务器简介 2. Tomcat服务器基本使用 3. 启动tomcat常见问题 &#xff08;1&#xff09;启动tomcat控制台乱码 &#xff08;2&#xff09;启动tomcat闪退问题 &#xff08;…

DevOps系列文章 之 Springboot单元测试

在没有代码生成工具或尝试一门新的 ORM框架时&#xff0c;当我们希望不去另外写 Service 和 Controller 来验证 DAO 层的代码不希望只通过接口请求的方式来验证时&#xff0c;这时候单元测试的方式就可以帮助我们满足这一需求。 在我们开发Web应用时&#xff0c;经常会直接去观…

爬虫003_pycharm的安装以及使用_以及python脚本模版设置---python工作笔记021

这里我们用ide,pycharm来编码,看一看如何下载 这里我们下载这个社区办,这个是免费的,个人版是收费的 然后勾选以后 安装以后我们来创建一个项目 这里可以选择python的解释器,选择右边的... 这里我们找到我们自己安装的python解释器

Android Hook系统 Handler 消息实现

前言 主线程的Handler 主要依赖于 ActivityThread&#xff0c;Android是消息驱动&#xff0c;比如view的刷新&#xff0c;activity的创建等&#xff0c;如果能打印系统层Handler消息日志&#xff0c;就需要对于系统层的Handler 进行Hook 原理 ActivityThread中 mH对象主要负责…

【雕爷学编程】MicroPython动手做(02)——尝试搭建K210开发板的IDE环境4

7、使用串口工具 &#xff08;1&#xff09;连接硬件 连接 Type C 线&#xff0c; 一端电脑一端开发板 查看设备是否已经正确识别&#xff1a; 在 Windows 下可以打开设备管理器来查看 如果没有发现设备&#xff0c; 需要确认有没有装驱动以及接触是否良好 &#xff08;2&a…

【JVM】详解JVM的五大内存模型、可能出现的异常以及堆栈引用易错点

文章目录 1、堆(线程共享)2、方法区(线程共享)3、虚拟机栈&#xff08;线程私有&#xff09;4、本地方法栈(线程私有)5、程序计数器(线程私有)6、易错点 源自&#xff1a;深入理解Java虚拟机&#xff1a;JVM高级特性与最佳实践&#xff08;第3版&#xff09; 周志明 1、堆(线程…

C语言第十一课--------操作符的使用与分类-------基本操作

作者前言 作者介绍&#xff1a; 作者id&#xff1a;老秦包你会&#xff0c; 简单介绍&#xff1a; 喜欢学习C语言和python等编程语言&#xff0c;是一位爱分享的博主&#xff0c;有兴趣的小可爱可以来互讨 个人主页::小小页面 gitee页面:秦大大 一个爱分享的小博主 欢迎小可爱们…

css 书写规范!其他人总结!

CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing, color- text-align等) 4.背景(background, border等) 5.其他(animation, transition等) CSS书写规范 使用…

MyBatis-Plus自定义sql注入器

文章目录 一、前言二、MyBatis-Plus自定义sql注入器功能实现2.1、编写自定义sql类2.2、将自定义sql添加到BaseMapper中2.3、编写自己的sql注入器 一、前言 在日常开发过程中&#xff0c;我们可能会发现 MyBatis-Plus 提供的那些自带的 sql 语句无法满足我们的开发需求&#xf…

web自动化测试进阶篇05 ——— 界面交互场景测试

&#x1f60f;作者简介&#xff1a;博主是一位测试管理者&#xff0c;同时也是一名对外企业兼职讲师。 &#x1f4e1;主页地址&#xff1a;【Austin_zhai】 &#x1f646;目的与景愿&#xff1a;旨在于能帮助更多的测试行业人员提升软硬技能&#xff0c;分享行业相关最新信息。…

【Ajax】笔记-同源策略

同源策略(Same-Origin Policy)&#xff0c;是浏览器的一种安全策略 同源&#xff08;即url相同&#xff09;&#xff1a;协议、域名、端口号 必须完全相同。&#xff08;请求是来自同一个服务&#xff09; 跨域&#xff1a;违背了同源策略&#xff0c;即跨域。 ajax请求是遵循…

texshop mac中文版-TeXShop for Mac(Latex编辑预览工具)

texshop for mac是一款可以在苹果电脑MAC OS平台上使用的非常不错的Mac应用软件&#xff0c;texshop for mac是一个非常有用的工具&#xff0c;广泛使用在数学&#xff0c;计算机科学&#xff0c;物理学&#xff0c;经济学等领域的合作&#xff0c;这些程序的标准tetex分布特产…

flask中的session介绍

flask中的session介绍 在Flask中&#xff0c;session是一个用于存储特定用户会话数据的字典对象。它在不同请求之间保存数据。它通过在客户端设置一个签名的cookie&#xff0c;将所有的会话数据存储在客户端。以下是如何在Flask应用中使用session的基本步骤&#xff1a; 首先…

github Recv failure: Connection reset by peer

Recv failure: Connection reset by peer 背景处理ping一下github网页访问一下github项目git配置git ssh配置再次尝试拉取 疑惑点待研究参考 背景 晚上敲着代码准备提交&#xff0c;执行git pull&#xff0c;报错Recv failure: Connection reset by peer。看着这报错我陷入了沉…

【fly-iot飞凡物联】(12):EMQX 5.1使用docker 本地部署,接入到Actorcloud的数据库中,成功连接创建的设备,可以控制设备访问状态

目录 前言1&#xff0c;关于2&#xff0c;使用docker 进行部署3&#xff0c;配置API key 可以使用接口访问的4&#xff0c;设置客户端认证&#xff0c;连接PostgreSQL 数据连接5&#xff0c;使用客户端进行连接6&#xff0c;EMQX的API 接口地址7&#xff0c;总结 前言 本文的原…

应用层协议——http

文章目录 1. HTTP协议1.1 认识URL1.2 urlencode和urldecode1.3 HTTP协议格式1.3.1 HTTP请求1.3.2 HTTP响应1.3.3 外网测试1.3.4 添加html文件1.3.5 HTTP常见Header1.3.6 GET和POST 1.4 HTTP的状态码1.4.1 301和3021.4.2 代码实现 1.5 Cookie1.5.1 代码验证1.5.2 Cookiesession …

点击图片1.全屏阅览2.下载3.关闭 纯纯html css js

要实现图片点击全屏预览的功能&#xff0c;可以使用JavaScript和CSS来实现。以下是一个简单的示例代码&#xff1a; html <!DOCTYPE html> <html> <head><meta charsett"UTF-8"><title>图片点击全屏预览</title><style>…