vue3+ts <script setup lang=“ts“> element-plus的el-date-picker设置默认日期

效果图(单个日期):

 utils.ts:

/*** 格式化时间戳* @param {number} timestamp 时间戳* @param {string} format 格式* @returns {string}*/
export const formatTimeStamp = (timestamp: number, format: string) => {if (!timestamp) return;const date = new Date(timestamp);const year = date.getFullYear().toString();const month = String(date.getMonth() + 1).padStart(2, "0");const day = String(date.getDate()).padStart(2, "0");const hours = String(date.getHours()).padStart(2, "0");const minutes = String(date.getMinutes()).padStart(2, "0");const seconds = String(date.getSeconds()).padStart(2, "0");// 替换格式字符串中的占位符const formattedDate = format.replace("YYYY", year).replace("mm", month).replace("dd", day).replace("HH", hours).replace("MM", minutes).replace("SS", seconds);return formattedDate;
};

页面(单个日期):

       <el-form-item prop="install_date" label="安装日期:"><el-date-pickerv-model="siteInfo.install_date"type="date"placeholder="安装日期"value-format="YYYY-MM-DD"/></el-form-item>
<script setup lang="ts">
import { formatTimeStamp } from "/@/utils/utils";
let siteInfo = reactive({
install_date: formatTimeStamp(new Date().getTime(), "YYYY-mm-dd"),
});
</script>

效果图(日期区间):

 dates.ts:

// 格式化日期:yyyy-MM-dd
export const formatDate = function (date: any) {const myyear = date.getFullYear();let mymonth = date.getMonth() + 1;let myweekday = date.getDate();if (mymonth < 10) {mymonth = "0" + mymonth;}if (myweekday < 10) {myweekday = "0" + myweekday;}return myyear + "-" + mymonth + "-" + myweekday;
};
// 获得某月的天数
function getMonthDays(myMonth: any) {const monthStartDate = new Date(nowYear, myMonth, 1) as any;const monthEndDate = new Date(nowYear, myMonth + 1, 1) as any;const days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);return days;
}

页面(日期区间):

       <el-form-item label="日期"><el-date-pickerclass="gf-input"v-model="query.dateTime"range-separator="至"value-format="YYYY-MM-DD"type="daterange"unlink-panels@change="onSearch"></el-date-picker></el-form-item>
<script setup lang="ts">
import { formatDate } from "/@/utils/dates";
const query = reactive({dateTime: [formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24 * 30)),formatDate(new Date(new Date().getTime()))] as any
});
</script>

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

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

相关文章

深入解析Java和Go语言中String与byte数组的转换原理

1.Java String与byte[]互相转换存在的问题 java中&#xff0c;按照byte[] 》string 》byte[]的流程转换后&#xff0c;byte数据与最初的byte不一致。 多说无益&#xff0c;上代码&#xff0c;本地macos机器执行&#xff0c;统一使用的UTF-8编码。 import java.nio.charset.S…

Linux-笔记 嵌入式gdb远程调试

目录 前言 实现 1、内核配置 2、GDB移植 3、准备调试程序 4、开始调试 前言 gdb调试器是基于命令行的GNU项目调试器&#xff0c;通过gdb工具我们可以实现许多调试手段&#xff0c;同时gdb支持多种语言&#xff0c;兼容性很强。 在桌面 Linux 系统&#xff08;如 Ubuntu、Cent…

【Java】微博系统设计:怎么应对热点事件的突发访问压力?

一、问题解析 微博&#xff08;microblog&#xff09;是一种允许用户即时更新简短文本&#xff08;比如140个字符&#xff09;&#xff0c;并可以公开发布的微型博客形式。今天我们就来开发一个面向全球用户、可以支持10亿级用户体量的微博系统&#xff0c;系统名称为“Weitte…

2024连云港等保测评机构看这里!

2024连云港等保测评机构看这里&#xff01; 目前连云港暂未有具有等保资质的机构。因此连云港企业可以就近选择江苏省内等保测评机构&#xff0c;或者在网上寻找合适的机构。 连云港城市简单介绍 连云港——江苏省辖地级市&#xff0c;地处沿海中部&#xff0c;东濒黄海&…

访问网站时IP被屏蔽是什么原因?

在互联网使用中&#xff0c;有时我们可能会遇到访问某个网站时IP地址被屏蔽的情况。IP地址被网站屏蔽是一个相对常见的现象&#xff0c;而导致这种情况的原因多种多样&#xff0c;包括恶意行为、违规访问等。本文将解释IP地址被网站屏蔽的常见原因&#xff0c;同时&#xff0c;…

编译VTK静态库

编译VTK静态库遇到问题 vtkCommonCore-9.3d.lib(vtkSMPToolsAPI.obj) : error LNK2019: unresolved external symbol "public: bool __cdecl vtk::detail::smp::vtkSMPToolsImpl<1>::IsParallelScope(void)" (?IsParallelScope?$vtkSMPToolsImpl$00smpdetai…

JVM专题七:JVM垃圾回收机制

JVM专题六&#xff1a;JVM的内存模型中&#xff0c;我们介绍了JVM内存主要分哪些区域&#xff0c;这些区域分别是干什么的&#xff0c;同时也举了个例子&#xff0c;在运行过程种各个区域数据是怎样流转的。细心的小伙伴可能发现一个问题&#xff0c;在介绍完方法弹栈以后就没有…

【仿真建模-anylogic】Scale解析

Author&#xff1a;赵志乾 Date&#xff1a;2024-06-27 Declaration&#xff1a;All Right Reserved&#xff01;&#xff01;&#xff01; 1. 应用场景 Scale是比例尺&#xff0c;用于长度单位和像素之间的换算&#xff0c;anylogic默认为每个agent生成一个scale&#xff0c;…

Navicat 外网连接 mysql (1、通过SSH方式内网访问 2、对外开放3306端口)

1、通过SSH方式内网访问 直接常规方式使用IP、账号密码连接&#xff0c;失败 SSH方式&#xff1a; 常规 选项卡中&#xff1a;localhost录入数据库账号密码 SSH 选项卡中&#xff1a;勾选使用SSH&#xff0c;输入服务器IP、账号、密码 如果出现该错误&#xff0c;可能是服务器…

主流电商平台API接口(天猫获得淘宝商品详情,获得淘宝app商品详情原数据 ,获得淘口令真实url API,按图搜索淘宝商品(拍立淘) API )

主流电商平台商品接口在电商企业中具有重要应用价值。通过商品接口&#xff0c;电商企业可以实现商品同步功能&#xff1a; 商品信息同步&#xff1a;通过接口可以实时同步主流电商平台上的商品信息&#xff0c;包括商品标题、价格、库存、销量等数据&#xff0c;确保企业在自…

GPU_Gems-物理模型的水模拟

创建一个多网格的平面 void GraphicsWindowBase::RenderPlane() {constexpr int width 150;constexpr int depth 150;constexpr int vertNum width * depth;float length 60.f;if (quadVAO 0){float planeVert[vertNum * 5];float offsetX length / (width - 1.f);float…

【精选】数据治理项目实施(合集)05——解码“数据架构”,数据架构包含哪些内容?

上一篇讲到了数据治理项目的前期调研工作&#xff0c;继数据调研工作完成之后&#xff0c;就要开始关于治理工作的各项方案设计&#xff0c;整体方案设计包括数据架构、元数据、主数据、数据质量、数据安全、指标标签体系、数据生命周期管理和管理评价等内容。这一篇重点讲一下…

聊一聊UDF/UDTF/UDAF是什么,开发要点及如何使用?

背景介绍 UDF来源于Hive&#xff0c;Hive可以允许用户编写自己定义的函数UDF&#xff0c;然后在查询中进行使用。星环Inceptor中的UDF开发规范与Hive相同&#xff0c;目前有3种UDF&#xff1a; A. UDF--以单个数据行为参数&#xff0c;输出单个数据行&#xff1b; UDF&#…

为什么说展厅数字人是展览未来的趋势?

展厅数字人是利用数字化、智能化和网络化等信息技术手段提升展厅展览服务和游览体验的全新载体。随着人工智能和虚拟现实技术的应用发展&#xff0c;展厅数字人已成为展厅展览转型升级的重要趋势。 展厅数字人凭借其创新性、强可塑性&#xff0c;成为展厅新名片&#xff0c;为各…

趣测系统搭建APP源码开发,娱乐丰富生活的选择!

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 趣测系统提供了一个集合多种有趣测试的平台&#xff0c;如心理测试和星座测试等&#xff0c;这些测试内容富有趣味性和娱乐性&#xff0c;能够帮助大众在忙碌的生活中找到放松和娱乐的时刻…

Vite 动态导入警告问题解决方案

如上图我要实现从后台获取权限菜单并动态导入进行渲染 但由于 vite 暂时不支持这种导入方式 图中也给出了提示 本人也是这么去做了 但并没什么卵用 后来参考了 vite 的 import.meta.glob 这种方式 我在处理菜单权限控制的菜单里进行了如下操作&#xff1a; …

Hyperf 在 NginxProxyManager 如何配置 websocket?

新建代理 填写域名等服务信息&#xff0c;选择支持WebSockets。 创建 SSL 编写nginx配置 location /message.io{proxy_pass http://<你的ip>:<对应端口号>;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "Upg…

会计报表分析

目录 一. 会计报表的种类 \quad 一. 会计报表的种类 \quad 反应财务状况的是资产负债表 反应经营成果的是利润表 有时间点的就是静态表 动态表就是有一个区间的, 比如一年, 一个季度等

学习笔记——动态路由——RIP(RIP路由汇总介绍)

四、RIP路由汇总介绍 当网络中路由器的路由条目非常多时&#xff0c;可以通过路由汇总&#xff08;又称路由汇聚或路由聚合&#xff09;来减少路由条目数&#xff0c;加快路由收敛时间和增强网络稳定性。 路由汇总的原理是&#xff0c;同一个自然网段内的不同子网的路由在向外…

Django 如何使用视图动态输出 CSV 以及 PDF

Django 如何使用视图动态输出 CSV 以及 PDF 这一篇我们需要用到 python 的 csv 和 reportLab 库&#xff0c;通过django视图来定义输出我们需要的 csv 或者 pdf 文件。 csv文件 打开我们的视图文件 testsite/members/views.py 。新增一个视图方法&#xff1a; import csv …