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.mzph.cn/news/861775.shtml

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

相关文章

Mongodb中的基本地理信息元素

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第77篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题&#xff0c;欢迎在文章下面点个赞&#xff0c;或者关…

Python 实现试卷下载器:从零开始构建 GUI 应用

在本文中&#xff0c;我们将介绍如何使用 Python 构建一个简单的试卷下载器。该应用程序可以从指定的网站下载试卷&#xff0c;并通过一个图形用户界面&#xff08;GUI&#xff09;来进行交互。我们将使用 requests 库进行网络请求&#xff0c;使用 BeautifulSoup 解析 HTML&am…

C语言使用正则表达式

C语言使用正则表达式 1. 导入头文件2. 编译正则表达式3. 执行正则表达式4. 释放正则表达式完整示例说明 在C语言中&#xff0c;可以使用POSIX正则表达式库来匹配正则表达式。POSIX正则表达式库提供了标准的正则表达式处理函数&#xff0c;例如 regcomp, regexec, 和 regfree…

iso21434认证的意义

ISO 21434认证对于汽车行业具有深远的意义&#xff0c;主要体现在以下几个方面&#xff1a; 确保汽车网络安全&#xff1a;ISO 21434认证旨在确保汽车在设计和制造过程中能够抵御潜在的网络威胁和攻击。通过遵循该标准&#xff0c;汽车制造商能够开发出具备可靠网络安全能力的…

Linux系统防火墙iptables(下)

备份与还原iptables规则设置 1、yum -y install iptables iptables-services 安装iptables软件包 2、systemctl start iptables.service 开启服务 3、systemctl enable iptables.service 开机自启 我们对iptables命令行中的设置&#xff0c;都是临时设置&#xff0c;只要遇到服…

GPT-5

欢迎来到 Papicatch的博客 文章目录 &#x1f349;技术突破预测 &#x1f348;算法进步 &#x1f348;理解力提升 &#x1f348;行业推动力 &#x1f349;人机协作的未来 &#x1f348;辅助决策 &#x1f348;增强创造力 &#x1f348;复杂任务中的角色 &#x1f348;人…

深入剖析Tomcat(十三) Host、Engine 容器

前面很多篇文章都在介绍Context与Wrapper两个容器&#xff0c;因为这两个容器确实也比较重要&#xff0c;与我们日常开发也息息相关&#xff0c;但是Catalina是存在四个容器的&#xff0c;这一章就来简单看看Host与Engine这两个容器。 再次展示下Catalina的容器结构&#xff0…

VS2022(Visual Studio 2022)最新安装教程

1、下载 1、下载地址 - 官网地址&#xff1a;下载 Visual Studio Tools - 免费安装 Windows、Mac、Linux - 根据自己的电脑的 【操作系统】 灵活选择。 2、安装包 【此处为Windows系统安装包】 2、安装 1、打开软件 - 右击【以管理员身份打开】&#xff0c; 2、准备配置 …

Web Serial串口通信实现WEB浏览器读写M1卡

本示例使用的设备&#xff1a;RS232串口RFID NFC IC卡读写器可二次开发编程发卡器USB转COM-淘宝网 (taobao.com) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l…

前端面试题-token的存放位置

哈喽小伙伴们大家好,本系列是一个专门针对前端开发岗的面试题系列,每周将会不定期分享一些面试题,希望对大家有所帮助. 面试官:token 一般在客户端存在哪儿 求职者:Token一般在客户端存在以下几个地方&#xff1a; (1)Cookie&#xff1a;Token可以存储在客户端的Cookie中。服…

61.应交税费的明细科目-待转销项税额

目录 1.变化 2.定义 3.科目设置的目的 4.会计处理 5.会计分录 1.变化 财会2016年22号文--《增值税会计处理规定》中对于应交税费的会计处理有了重大变化&#xff0c;引入了“待转销项税额”这一二级明细科目来核算一般纳税人销售货物、加工修理修配劳务、服务、无形资产…

优思学院|工厂的部门架构管理与精益生产

工厂内有不同部门&#xff0c;各部门之间必须协调合作才能发挥整体功能。工厂最主要的部分是制造产品的现场&#xff0c;这里安装了生产工具&#xff0c;还有操作员进行加工或生产制造。 制造时使用的材料或零组件&#xff0c;需要对外采购。对于加工组装型的工厂&#xff0c;…

短视频利器 ffmpeg (1)

使用FFmpeg切片视频有多种好处&#xff0c;尤其是在处理流媒体内容和优化视频分发时。以下是一些主要优点&#xff1a; 提高流媒体性能&#xff1a; 1、快速启动&#xff1a; 切片允许客户端更快地开始播放视频&#xff0c;因为它不需要等待整个文件下载完毕。客户端可以请求…

基于Boost和平均电流控制方法的APFC电路设计

通过学习无线充电相关知识&#xff0c;为更快熟悉APFC工作原理&#xff0c;通过实验得以掌握 技术要求&#xff1a; 1&#xff09;输入电压&#xff1a;AC 85V&#xff5e;265V&#xff1b; 2&#xff09;输出电压&#xff1a;400V1%&#xff1b; 3&#xff09;输出额定电流…

AI推介-信息抽取(information extraction,IE)论文速览(arXiv方向):2024.04.15-2024.06.01

文章目录~ 1.GAMedX: Generative AI-based Medical Entity Data Extractor Using Large Language Models2.Retrieval Augmented Structured Generation: Business Document Information Extraction As Tool Use3.BioBERT-based Deep Learning and Merged ChemProt-DrugProt for…

音视频开发30 FFmpeg 视频编码- 流程以及重要API,H264编码原理说明,该章节使用h264编码说明

一.H264编码原理 1 视频为什么需要进行编码压缩 ◼ 一张为 720x480 的图像&#xff0c;用 YUV420P 的格式来表示&#xff0c;其大小为&#xff1a; 720*480*1.5 约等于 0.5MB 。 ◼ 如果是 25 帧&#xff0c; 10 分钟的数据量 0.5M*10*60*25 7500MB -> 7GB 多 ◼ …

自学网络安全的三个必经阶段(含路线图)

一、为什么选择网络安全&#xff1f; 这几年随着我国《国家网络空间安全战略》《网络安全法》《网络安全等级保护2.0》等一系列政策/法规/标准的持续落地&#xff0c;网络安全行业地位、薪资随之水涨船高。 未来3-5年&#xff0c;是安全行业的黄金发展期&#xff0c;提前踏入…

blender 快捷键 常见问题

一、快捷键 平移视图&#xff1a;Shift 鼠标中键旋转视图&#xff1a;鼠标中键缩放视图&#xff1a;鼠标滚动框选放大模型&#xff1a;Shift B线框预览和材质预览切换&#xff1a;Shift Z 二、常见问题 问题&#xff1a;导入模型成功&#xff0c;但是场景中看不到。 解…

电路与数字逻辑期末复习重点整理!!

1.带无关项的卡诺图 2.置数法设计N进制电路 计数器&#xff1a;具有记忆输入脉冲个数功能的电路称为计数器。 按照各个触发器状态更新情况的不同可分为&#xff1a; 同步计数器&#xff1a;各触发器受同一时钟脉冲─输入计数脉冲控制&#xff0c;同步更新状态。异步计数器&a…

阿里云centos 7.9 使用宝塔面板部署.netcore 6.0

前言&#xff1a; 我有一个netcore6.0的系统接口和手机端程序的站点程序之前是部署在一台windows测试服务器的IIS站点中&#xff0c; 服务器最近压力太大扛不住了&#xff0c;买了一台centos7.9的阿里云服务器准备进行迁移。具体操作日记如下。 一、安装宝塔面板 这一步涉及…