vue3+antd中使用Dayjs实现输出的日期格式化,和限制自定义日期选择器的可选范围

news/2024/4/26 6:21:13/文章来源:https://blog.csdn.net/weixin_45745641/article/details/127622229

场景复现

在vue3+antd项目中用到了日期选择器,但是默认的日期选择的结果是标准的日期格式,我们往往需要对最后的结果进行一定的格式化输出
在这里插入图片描述
一般输出的是这种标准的数据格式
在这里插入图片描述
如果我们想对时间进行指定的格式化输出,通常大家会想到moment,但是这里我们使用的是antd框架,在 V3 版本开始,默认使用 dayjs 替换了 momentjs 库,所以我们这里可以使用同样功能强大的dayjs库,不需要额外的下载安装
在这里插入图片描述

Day.js的使用

关于dayjs的使用,功能同样非常强大,更多功能可以移步 官方文档
我们现在想要将上面的时间数据格式化输出为 2020-11-1的格式,则可以用如下使用方法:
先进行引入:

import dayjs, { Dayjs } from "dayjs";

然后进行使用:
dayjs().format(“YYYY-MM-DD”)进行格式化,因为我这里是响应式数据proxy,所以用JSON.parse(JSON.stringify())转了一下。

const abs = dayjs(JSON.parse(JSON.stringify(formState.value.count_down_end_date))).format("YYYY-MM-DD");

然后我们打印数据查看格式:
可以看到日期已经是我们想要的格式
在这里插入图片描述
当然其他的格式都能通过下面的格式化占位符来实现
在这里插入图片描述

自定义日期选择器的可选范围

可以看到文档中介绍,通过disabledTime属性设置不可选的范围,
在这里插入图片描述
然后定义disableDate的内容:
代表禁选今天以及今天之前的内容

const disabledDate = (current: Dayjs) => {return (current && current < dayjs().endOf("day")); 
}

这里的具体内容可以根据自己的需求来自己定义:
比如我这里需求:只能选择明天到未来999天以内的日期:
还是需要用到dayjs中的方法来实现

const disabledDate = (current: Dayjs) => {return (current && current < dayjs().endOf("day")) || (current > dayjs().add(999,'day')); 
}

这样就能限制选择的日期范围:

在这里插入图片描述

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

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

相关文章

如何在页面中制作悬浮发布按钮弹窗

效果展示&#xff1a; 前置准备&#xff1a; 1.已搭建好&#xff0c;待添加悬浮层的页面 2.icon素材 具体步骤&#xff1a;&#xff08;3&#xff09; 1.添加悬浮层页面 2.配置悬浮层关闭触发器 3.配置首页发布icon触发器和动画 步骤分解&#xff1a; 1.添加悬浮层页面 1.1…

2022 年跨境电商要尝试的 25 个黑五营销技巧

关键词&#xff1a;黑五营销、黑色星期五活动、跨境电商黑五 我们汇总了以下最佳跨境电商黑五创意清单&#xff1a; 黑五营销技巧分享 如何宣传您的黑色星期五优惠 小型企业的黑五营销创意 黑五营销提示 随意跳到您最感兴趣的部分&#xff0c;或通读它们&#xff0c;看看…

JAVA序列化和反序列化学习笔记

0x01 开始学习JAVA反序列化&#xff0c;参考 《安全漫谈》和feng师傅的文章一步一步来&#xff0c;希望 能赶在这个学期学完java最基础的东西&#xff0c; 笔记做到这里方便自己查阅&#xff0c;也是事先实操了一下 &#xff0c;才写的笔记 概念&#xff1a; JAVA 序列化 就是…

program arguments,vm arguments,environment variable

作者:david_zhang@sh 【转载时请以超链接形式标明文章】 https://www.cnblogs.com/david-zhang-index/p/16846493.html 参数太多,傻傻分不清楚,简单说 1,program arguments是main函数args[]参数 2,vm arguments是java环境变量 3,environment variable是jvm环境变量 看代码…

华为设备配置NAT原理与示例

网络地址转换NAT 文章目录网络地址转换NAT1 NAT概述1.1 NAT产生的技术背景1.2 私有IP地址1.3 NAT技术原理2 静态NAT2.1 静态NAT原理2.2 静态NAT转换示例2.3 静态NAT配置介绍2.4 静态NAT配置示例3 动态NAT3.1 动态NAT原理3.2 动态NAT转换示例3.3 动态NAT配置介绍3.4 动态NAT配置…

resultMap结果映射

文章目录一、resulrMap结果映射二、驼峰命名自动映射查询结果的列名和Java对象的属性名对应不上怎么办&#xff1f; *第一种方式&#xff1a;as给列名起别名 *第二种方式&#xff1a;使用resultMap进行结果映射 *第三种方式&#xff1a;是否开启驼峰命名自动映射&#xff08;配…

算法学习:动态规划

14天阅读挑战赛 努力是为了不平庸~ 系列文章目录 第一章 算法简介 第二章 贪心算法 第三章 分治法 第四章 动态规划 目录系列文章目录2.0兔子序列2.1动态规划基础2.2最长的公共子序列2.2.1问题描述&#xff1a;2.2.2分析问题&设计思路&#xff1a;2.2.3图解思路&#xff1…

Python抓取我的CSDN粉丝数,白嫖GithubAction自动抓取

《Python抓取我的CSDN粉丝数&#xff0c;白嫖GithubAction自动抓取》 一.介绍 这段时间我想申请CSDN的博客专家认证&#xff0c;但是我发现我的总访问量不够&#xff08;博客专家的总访问量要大于20万&#xff09;&#xff0c;所以我就想把我的CSDN每天的 【总访问量】&#…

芯片与自动驾驶技术漫谈

芯片与自动驾驶技术漫谈 从芯片到系统国产,信创产业如何4步走上自主路? 信创产业发展是国家经济数字化转型、提升产业链发展的关键。我国明确了“数字中国”建设战略,抢占数字经济产业链制高点。推进信创产业的发展,促进信创产业在区域性落地生根,带动传统IT信息产业转型,…

【光通信】常见光模块与光纤收发器说明及作用区别

&#xff1a;单纤收发器是指采用的是单模光缆 单纤收发器是只用一根芯&#xff0c;两端都接这根芯&#xff0c;两端的收发器采用不同的光波长&#xff0c;所以能在一根芯里传输光信号。 双纤收发器就是采用了两根芯&#xff0c;一根发送一根接收&#xff0c;一端是发的另一端就…

MongoDB 分片集群均衡器导致的性能下降

近期&#xff0c;有人反馈其mongodb分片集群&#xff0c;在加载处理大批量数据时&#xff0c;程序处理十分缓慢并且应用还会报错&#xff1a;version mismatch detected for 。现将分析汇总如下备用。 一、问题现象 负责同事反馈9月1日18:52分左右&#xff0c;应用报错version…

计算机毕业设计(附源码)python医院预约挂号管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

学习笔记-php伪协议

伪协议 相关文章 & Source & Reference PHP伪协议的妙用 filter协议 php://filter 是一种元封装器&#xff0c; 设计用于数据流打开时的筛选过滤应用。这对于一体式(all-in-one)的文件函数非常有用&#xff0c;类似 readfile()、 file() 和 file_get_contents()&#x…

网课查题系统搭建-查题校园题库

网课查题系统搭建-查题校园题库 本平台优点&#xff1a; 多题库查题、独立后台、响应速度快、全网平台可查、功能最全&#xff01; 1.想要给自己的公众号获得查题接口&#xff0c;只需要两步&#xff01; 2.题库&#xff1a; 查题校园题库&#xff1a;查题校园题库后台&…

【C++笔记】第十九篇 多态

C的多态 1. 多态简介 ① 多态是C面向对象三大特性之一。 ② 多态分为两类&#xff1a; 静态多态&#xff1a;函数重载和运算符重载属于静态多态&#xff0c;复用函数名。动态多态&#xff1a;派生类和虚函数实现运行时多态。 ③ 静态多态和动态多态区别&#xff1a; 静态…

【源码分析】Spring中的设计模式——Context与Factory的关系

省流助手 两个类都实现了同一个接口&#xff0c;但是其中一个类对接口的实现是通过调用另一个类的接口实现来实现的&#xff0c;这就是静态代理模式(也可以说是装饰器模式&#xff0c;这俩区别不大) 这个例子中就是AbstractBeanFactory和AnnotationConfigApplicationContext都…

电子签批板那个品牌好用?国产柜台电子签名板推荐

如今已正式迈入数字时代&#xff0c;电子合同、电子签名不再新奇&#xff0c;各行各业对电子签名呈现出多元化的细分需求&#xff0c;应用场景也更加广泛。目前通信、银行、保险、酒店、政务等有柜台业务服务的领域大多都已配备了电子签字板用以替代传统纸张业务办理流程。加上…

First time to know JAVA

文章目录前言1.JAVA语言概述1.1 JAVA是什么&#xff1f;1.2 JAVA语言的重要性1.3 JAVA语言的发展简史1.4 JAVA语言的特性2.初识JAVA的main方法2.1 main方法示例2.2 运行JAVA程序3.JAVA中的注释3.1 JAVA注释的基本规则3.2 JAVA注释规范4.初始JAVA中的标识符5.初始JAVA中的关键字…

pycharm中做web应用(12)基于Django和mysql 做用户登录验证2

目录pycharm中做web应用&#xff08;12&#xff09;基于Django和mysql 做用户登录验证2Django的用户验证方法Django架构的数据模型数据模型实现方法1&#xff1a;数据模型实现方法2&#xff1a;代码的实现pycharm中做web应用&#xff08;12&#xff09;基于Django和mysql 做用户…

什么蓝牙耳机听歌好?听歌音质好的蓝牙耳机推荐

蓝牙技术已经非常先进了&#xff0c;很多蓝牙耳机的音质体验可以跟有线耳机媲美了。正因为蓝牙耳机的便捷&#xff0c;越来越多的人开始选择蓝牙耳机。如果你还在纠结听歌的音质的话&#xff0c;可以看看下面几款&#xff01; 1、南卡小音舱蓝牙耳机 音质推荐指数&#xff1a…