【VUE3 element时间选择器默认选择七天】

VUE3 element时间选择器默认选择七天
在这里插入图片描述

<el-date-picker
 v-model="form.timeRange"
 type="datetimerange"
 start-placeholder="开始时间"
 end-placeholder="结束时间"
 format="YYYY-MM-DD HH:mm:ss"
 date-format="YYYY/MM/DD ddd"
 time-format="A hh:mm:ss"
/>
//搜索数据
const form = reactive({
    timeRange:[], // 时间范围,
    startTime: '',
    endTime: ''
})
onMounted(() => {
    form.timeRange = getNowTime()
    ......
})
//默认选中近七天
function getNowTime() {
    // let that=this
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    // console.log([start, end])
    form.startTime= formatDate(start);
    form.endTime = formatDate(end);
    return [start, end]
}
// 时间格式化
function formatDate(date) {
    var myyear = date.getFullYear();
    var mymonth = date.getMonth() + 1;
    var myweekday = date.getDate();
    var h = date.getHours();
    if (mymonth < 10) {
    mymonth = "0" + mymonth;
    }
    if (myweekday < 10) {
    myweekday = "0" + myweekday;
    }
    h = h < 10 ? "0" + h : h;
    var m = date.getMinutes();
    m = m < 10 ? "0" + m : m;
    var s = date.getSeconds();
    s = s < 10 ? "0" + s : s;
    return (
    myyear + "-" + mymonth + "-" + myweekday + " " + h + ":" + m + ":" + s
    );
}

-------------看不明白可付费解答(¥20/次,没能解决问题不收费)------------------------

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

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

相关文章

遗传算法笔记:基本工作流程

1 介绍 遗传算法有5个主要任务&#xff0c;直到找到最终的解决方案 2 举例 2.1 问题描述 比如我们有 5 个变量和约束&#xff0c;其中 X1、X2、X3、X4 和 X5 是非负整数且小于 10&#xff08;0、1、2、4、5、6、7、8、9&#xff09;我们希望找到 X1、X2、X3、X4 和 X5 的最…

背包问题—动态规划

01背包问题&#xff1a;没有物品&#xff08;元素&#xff09;只能选择1次 【模板】01背包_牛客题霸_牛客网 (nowcoder.com) #include <array> #include <cstring> #include <iostream> #include<vector> using namespace std; int n,V; int dp[1001…

OJ刷题——2086.AI=?、2087.剪花布条、KPM算法

2086.AI&#xff1f; 题目描述 Problem - 2086 运行代码 #include <iostream> #include <cstdio> using namespace std; const int N 3005; int main() {int n;double Ao, An;double num[N];while (cin>>n) {cin >> Ao>>An;for (int i 1; i…

MATLAB基础应用精讲-【数模应用】二元Logit分析

目录 算法原理 数学模型 极大似然法 Newton牛顿迭代法 logit回归分析步骤 一、二元logit分析 1.基本说明 2.数据处理 3.SPSSAU上传数据 4.分析前提示 5.SPSSAU分析 6.其它说明 二、多分类logit分析 1.基本说明 2.数据要求与处理 3.SPSSAU上传数据 4.SPSSAU分析…

C语言:结构体数组

结构体数组 介绍定义结构体定义结构体数组初始化结构体数组访问和修改结构体数组的元素遍历结构体数组 示例高级用法动态分配结构体数组使用 malloc 动态分配使用 calloc 动态分配 结构体数组作为函数参数结构体数组与指针多维结构体数组使用 typedef 简化结构体定义结构体数组…

【文档智能 RAG】RAG增强之路:增强PDF解析并结构化技术路线方案及思路

前言 现阶段&#xff0c;尽管大模型在生成式问答上取得了很大的成功&#xff0c;但由于大部分的数据都是私有数据&#xff0c;大模型的训练及微调成本非常高&#xff0c;RAG的方式逐渐成为落地应用的一种重要的选择方式。然而&#xff0c;如何准确的对文档进行划分chunks&…

【Oracle生产运维】数据库服务器负载过高异常排查处理

说明 在Oracle数据库运维工作中&#xff0c;经常会遇到Oracle数据库服务器平均负载&#xff08;load average&#xff09;突然异常升高&#xff0c;如果放任不管&#xff0c;严重的情况下会出现数据库宕机、服务器重启等重大故障。因此&#xff0c;当发现数据库服务器平均负载…

shell编程(三)—— 控制语句

程序的运行除了顺序运行外&#xff0c;还可以通过控制语句来改变执行顺序。本文介绍bash的控制语句用法。 一、条件语句 Bash 中的条件语句让我们可以决定一个操作是否被执行。结果取决于一个包在[[ ]]里的表达式。 bash中的检测命令由[[]]包起来&#xff0c;用于检测一个条…

「网络原理」三次握手四次挥手

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;计网 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 三次握手&四次挥手 &#x1f349;连接管理&#x1f34c;三次握手&#x1f34c;意义&#x1f34c;四次挥手&#x1f34c;TCP 状态转换…

目标检测算法YOLOv9简介

YOLOv9由Chien-Yao Wang等人于2024年提出&#xff0c;论文名为&#xff1a;《YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information》&#xff0c;论文见&#xff1a;https://arxiv.org/pdf/2402.13616 &#xff1b;源码见: https://github.com/W…

Hexo+Github搭建个人博客教程

hexo官网&#xff1a;https://hexo.io/zh-cn/ butterfly 主题设置&#xff1a;https://butterfly.js.org/ GitHub地址&#xff1a;https://github.com/jerryc127/hexo-theme-butterfly 基础命令 初始化博客命令&#xff1a;hexo init “文件名” 开启本地服务&#xff08;本…

linux centos consul1.15.2一键安装部署

consul原理、作用、安装相关内容 一、理论部分二、安装下载版本地址三、安装consul服务 一、理论部分 1、consul的原理 Consul的原理及作用可以归纳为以下几点&#xff1a; ①、基于Gossip协议的通信&#xff1a;Consul使用了基于Gossip协议的Serf实现来进行通信。 Gossip协议…

C语言 | Leetcode C语言题解之第143题重排链表

题目&#xff1a; 题解&#xff1a; struct ListNode* middleNode(struct ListNode* head) {struct ListNode* slow head;struct ListNode* fast head;while (fast->next ! NULL && fast->next->next ! NULL) {slow slow->next;fast fast->next-&g…

Python酷库之旅-开启库房之门

目录 一、库的定义 二、库的组成 三、库的分类 四、如何学好Python库&#xff1f; 五、注意事项 六、推荐阅读 1、Python筑基之旅 2、Python函数之旅 3、Python算法之旅 4、Python魔法之旅 5、 博客个人主页 一、库的定义 在Python中&#xff0c;库(Library)是一个封…

两台电脑通过网线直连共享数据(超详细)- 我的实践记录

原文链接 按照原文的操作&#xff0c;成功通过直连网线连接了两台windows电脑并共享传输数据。 ping不通可能是防火墙没关闭导致的&#xff0c;但是完全关闭防火墙又不安全。 那么有没有不关闭防火墙&#xff0c;能够上网&#xff0c;又能直连另一台电脑呢&#xff1f; 我们…

javaweb请求响应+@ResponseBody注解

这里用了一款接口测试软件postman 简单参数 SpringBoot方式 简单参数:参数名与形参变量名相同&#xff0c;定义形参即可接收参数。 请求参数名与方法形参变量名相同 会自动进行类型转换 package com.example.springbootwebreqresp.Controller;import org.springframework.w…

SSM框架超详细讲解

介绍SSM框架 一、什么是SSM框架&#xff1f; SSM框架是spring、spring MVC 、和mybatis框架的整合&#xff0c;是标准的MVC模式。标准的SSM框架有四层&#xff0c;分别是dao层&#xff08;mapper&#xff09;&#xff0c;service层&#xff0c;controller层和View层。使用spr…

下拉框数据被遮挡 且 后续数据无法下拉的 解决方法

目录 前言1. 问题所示2. 原理分析3. 解决方法3.1 添加空白版2.2 调整z-index2.3 父容器的溢出属性2.4 调整样式属性4. 效果图前言 小程序使用的是Uniapp,原理都差不多,索性标题就不标注Uniapp(小程序) 对于该问题调试了一个晚上,最终解决,对此记录下来 1. 问题所示 执…

Python中的数据可视化:分组柱状图

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 Python中的数据可视化&#xff1a; 分组柱状图 选择题 关于以下代码输出结果的说法中正确的是? import seaborn as sns import matplotlib.pyplot as plt import pandas as pd data…

Vue2基础:.sync修饰符的使用,认识,作用,本质案例演示,实现父子之间的通信。

.sync的作用&#xff1a; 可以实现子组件与父组件数据的双向绑定&#xff0c;简化代码。 与v-model的不同点,prop属性名可以自定义&#xff0c;不要一定要用value. .sync的本质&#xff1a; 就是&#xff1a;属性名和update&#xff1a;属性名合写。 下面我们进行代码演示…