el-date-picker设置默认当前日期

HTMl部分: 

<el-form-item label="拍摄时间:"><el-date-pickerv-model="searchData.filmingTimeRange"type="daterange"align="right"unlink-panelsrange-separator="至"start-placeholder="开始日期"end-placeholder="结束日期":picker-options="pickerOptions"value-format="yyyy-MM-dd"/>
</el-form-item>

JS部分:

searchData: {pageNum: 1,pageSize: 10,filmingTimeRange: null,dwName: null,qyName: null
},mounted() {this.getNowDate()
},methods:{getNowDate() {var now = new Date()var year = now.getFullYear()var month = now.getMonth()var date = now.getDate()month = month + 1month = month.toString().padStart(2, '0')  //指定长度为2,不足2的话,从开始填充字符串0date = date.toString().padStart(2, '0')var defaultDate = `${year}-${month}-${date}`this.$set(this.searchData, 'filmingTimeRange', [defaultDate, defaultDate])},
}

可写成工具类,以供其他页面显示:

utils文件夹下getNowDateRange.js文件代码:

// 获取当前日期范围
export function getNowDate() {var now = new Date()var year = now.getFullYear()var month = now.getMonth()var date = now.getDate()month = month + 1month = month.toString().padStart(2, '0')date = date.toString().padStart(2, '0')var defaultDate = `${year}-${month}-${date}`return defaultDate
}
import { getNowDate } from '@/utils/getNowDateRange'data(){return{searchData: {pageNum: 1,pageSize: 10,filmingTimeRange: [getNowDate(), getNowDate()],dwName: null,qyName: null},}
}

也可使用MomentJS函数

import moment from 'moment'searchData: {pageNum: 1,pageSize: 10,filmingTimeRange: [moment().locale('zh-cn').format('yyyy-MM-DD'), moment().locale('zh-cn').format('yyyy-MM-DD')],dwName: null,qyName: null},

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

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

相关文章

vue中vuex的五个属性和基本用法,另加js-cookie的使用

VueX 是一个专门为 Vue.js 应用设计的状态管理构架&#xff0c;统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。 Vuex有五个核心概念&#xff1a; state, getters, mutations, actions, modules。 1. state&#xff1a; vuex的基本数据&…

【Linux】-- 进程间通信

目录 一、进程间通信介绍 二、管道 1.什么是管道&#xff08;pipe&#xff09; 2.重定向和管道 &#xff08;1&#xff09;为什么要有管道的存在 &#xff08;2&#xff09;重定向和管道的区别 3.匿名管道 &#xff08;1&#xff09;匿名管道原理 &#xff08;2&…

SpringCloud实用篇5——elasticsearch基础

目录 1.初识elasticsearch1.1 了解ES1.1.1 elasticsearch的作用1.1.2 ELK技术栈1.1.3 elasticsearch和lucene1.1.4 总结 1.2.倒排索引1.2.1.正向索引1.2.2.倒排索引1.2.3.正向和倒排 1.3 es的一些概念1.3.1 文档和字段1.3.2 索引和映射1.3.3 mysql与elasticsearch 1.4 部署单点…

C# ListBox自动滚动方法

1、方法1&#xff1a;添加记录后&#xff0c;选择最后一条记录&#xff0c;让滚动条滚动到底部&#xff0c;再自动取消 listBox1.Items.Add(t ":a good day"); listBox1.SelectedIndex listBox1.Items.Count - 1; listBox1.SelectedIndex -1; //是否取消选中行…

直播招聘小程序解决方案

项目开发愿景 介绍工作拿佣金&#xff0c;Boss直播现真身。做为直播招聘的新平台&#xff0c;让求职和招聘变得更简单&#xff01;企业发布招聘视频&#xff0c;展现公司环境与实力&#xff0c;开通会员可以直播招聘、在线面试功能&#xff1b;求职者刷视频可以刷到工作…

信息安全:访问控制技术原理与应用.

信息安全&#xff1a;访问控制技术原理与应用. 访问控制是网络信息系统的基本安全机制。访问控制是指对资源对象的访问者授权、控制的方法及运行机制。访问者又称为主体&#xff0c;可以是用户、进程、应用程序等&#xff1b;而资源对象又称为客体&#xff0c;即被访问的对象&…

react中hooks分享

一. HOOKS是什么 在计算机程序设计中&#xff0c;钩子一词涵盖了一系列技术&#xff0c;这些技术用来通过拦截函数调用、消息或在软件组件之间传递的事件来改变或增加操作系统、应用程序或其他软件组件的行为。处理这些被截获的函数调用、事件或消息的代码称为“hook”。 在r…

C++核心编程:C++中的引用

C中的引用 引用的基本语法 作用&#xff1a;给变量起别名 语法&#xff1a;数据类型 & 别名 原名 //比如给一个int变量a命名一个别名 b int &b a;b 20; cout<< a << endl;//a 20引用的注意事项 引用必须初始化 int &b;//错误的引用在初始化后&…

Wav2Lip实践

1. 安装 1.1 安装 conda以指定python版本运行环境 下载&#xff1a;Index of /https://repo.anaconda.com/archive/index.html 1.2 如按旧项目基于python3.6版本对话&#xff0c;会有很多包找不到的情况&#xff0c;经摸索后以python3.9构建成功&#xff0c; conda instal…

并发——何谓悲观锁与乐观锁

乐观锁对应于生活中乐观的人总是想着事情往好的方向发展&#xff0c;悲观锁对应于生活中悲观的人总是想着事情往坏的方向发展。这两种人各有优缺点&#xff0c;不能不以场景而定说一种人好于另外一种人。 悲观锁 总是假设最坏的情况&#xff0c;每次去拿数据的时候都认为别人会…

mysql日期函数(查询最近n(天/月/年)、计算日期之间的天数等)

mysql日期函数 目录 mysql查询最近一个月数据返回当前日期和时间将字符串转变为日期日期 d 减去 n 天后的日期计时间差&#xff0c;返回 datetime_expr2 − datetime_expr1 的时间差算查询当天数据 ADDDATE(d,n)计算起始日期 d 加上 n 天的日期 SELECT ADDDATE("2017-06…

LT8711HE 是一款高性能的Type-C/DP1.2到HDMI2.0转换器

LT8711HE 1.描述 LT8711HE是一种高性能的Type-C/DP1.2到HDMI2.0转换器&#xff0c;设计用于连接USB Type-C源或DP1.2源到HDMI2.0接收器。LT8711HE集成了一个DP1.2兼容的接收器&#xff0c;和一个HDMI2.0兼容的发射机。此外&#xff0c;还包括两个CC控制器&#xff0c;用于CC通…

单例模式-java实现

介绍 单例模式的意图&#xff1a;保证某个类在系统中有且仅有一个实例。 我们可以看到下面的类图&#xff1a;一般的单例的实现&#xff0c;是属性中保持着一个自己的私有静态实例引用&#xff0c;还有一个私有的构造方法&#xff0c;然后再开放一个静态的获取实例的方法给外界…

二次封装ajax和axios

ajax app.config.globalProperties.$http function(url, method, data, async, fun) {$.ajax({url: baseUrl url, //请求地址type: method, //请求方式dataType: json, //数据类型contentType: "application/json",xhrFields: { //跨域设置withCredentials: t…

【手撕C语言】多线程

(꒪ꇴ꒪ )&#xff0c;Hello我是祐言QAQ我的博客主页&#xff1a;C/C语言,Linux基础,ARM开发板&#xff0c;软件配置等领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff0c;让我们成为一个强大的攻城狮&#xff01;送给自己和读者的一句鸡汤&#x1f914;&…

多位数码管动态扫描显示变化数据(数码管局部闪烁)

/*----------------------------------------------- 内容&#xff1a;多位数码管分别显示不同数字&#xff0c;这种扫描显示方式成为动态扫描&#xff0c;并不停变化赋值 ------------------------------------------------*/ #include<reg52.h> //包含头文件&#xff0…

python 基础

1.Python 1.1 环境搭建&#xff1a;官网下载python&#xff0c;编译器&#xff1a;pycharm或jupyter 1.2 变量 &#xff08;1&#xff09;语法&#xff1a;变量名变量 &#xff08;2&#xff09;标识符命名规则&#xff1a;由数字、字母、下划线组成&#xff1b;不能以数字…

tcp发送整型,结构体等数据的方法

测试环境 Receiver: x86 UbuntuSender: arm64 android 发送整型数 C语言和套接字库来发送一个整型变量&#xff08;int&#xff09;的客户端程序。 它首先创建一个TCP套接字&#xff0c;然后连接到指定的服务器地址和端口。接着&#xff0c;它将一个整型变量&#xff08;in…

【数据结构与算法——TypeScript】数组、栈、队列、链表

【数据结构与算法——TypeScript】 算法(Algorithm)的认识 解决问题的过程中&#xff0c;不仅仅 数据的存储方式会影响效率&#xff0c;算法的优劣也会影响效率 什么是算法&#xff1f; 定义&#xff1a; &#x1f7e2; 一个有限指令集&#xff0c;每条指令的描述不依赖于言语…

UE5、CesiumForUnreal接入WMTS格式地图瓦片,如ArcGIS、Mapbox、天地图

文章目录 1.实现目标2.实现过程2.1 WMTS与TMS2.2 cesium-native改造2.3 CesiumForUnreal插件改造2.4 WMTS瓦片加载测试2.5 EPSG:3857与43263.参考资料1.实现目标 通过改造cesium-native和CesiumForUnreal插件,参考tms的栅格瓦片地图加载逻辑,实现在UE5中通过CesiumForUnreal…