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

最新推荐文章于 2025-04-22 18:51:52 发布
最新推荐文章于 2025-04-22 18:51:52 发布
阅读量4.4k 收藏 8
点赞数 2
分类专栏： Vue 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45745641/article/details/127622229
版权
本文介绍了在Vue3+Antd项目中，如何利用Day.js对日期选择器的输出进行格式化，如转化为"YYYY-MM-DD"格式，并详细说明了如何自定义日期选择器的可选范围，例如限制为从明天到未来999天的日期。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

场景复现

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

Day.js的使用

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

import dayjs
最低0.47元/天 解锁文章
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（1）
TJ1532635942的博客
08-23 4933
本文编写的目的是为了基于vite、vue3、ts搭建开箱即用的前端应用框架模板，会实现axios、vue-router和pinia的封装和基本使用。
Vite+Vue3.0项目使用ant-design-vue ＜a-calendar＞日期组件汉化
xxx割喉的博客
04-08 1517
【代码】Vite+Vue3.0项目使用ant-design-vue 日期组件汉化。
antd-dayjs-webpack-plugin::alarm_clock:适用于antd的Day.js Webpack插件
05-28
antd-dayjs-webpack-plugin A webpack plugin for . 一个 Day.js 的 Webpack 插件。 Replace Moment.js with Day.js in antd project in ONE step. Bundle size reduced from 65 kb -> 4.19 kb. 只需一步操作即可使用 Day.js 替换 Moment.js ，打包体积由 65 kb 优化至 4.19 kb。 Name Size Size gzip Moment.js 231 kb 65.55 kb Day.js 11.11 kb 4.19 kb Usage 使用方法 Install npm i dayjs --save. 安装 dayjs。 Install npm i antd-dayjs-webpack-plugin --save-de
VueApi-03
Jack94727的博客
07-03 547
Vue.js - Day3 定义Vue组件 什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可； 组件化和模块化的不同： + 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一； + 组件化： 是从UI界面的角度进行划分的；前端的组件化，方...
Ant Design 的DatePicker 日期选择框的简单使用
最新发布
songdancerap的博客
04-22 191
如果需要默认就在选择框内显示近7天的时间，可以定义一个dayjs对象数组，通过dayjs获取目标时间。如果想重置选择框中的内容，直接将 time 的值设置为 undefined 即可。通过回调函数 onRangeChange 可以获取目标格式的选择时间，例如。点击选择框中的清除按钮，也会触发 @change。工作中经常用到，所以记录一下以便后续使用。如果不需要默认显示可以定义为。
vue3使用dayjs
m0_53912016的博客
03-11 5516
安装配置
vue3使用dayjs以及dayjs日期工具类
weixin_45128657的博客
03-01 3558
Vue3使用dayjs全局使用以及将dayjs封装为自己需要的日期工具类。
Vue3使用dayjs以及dayjs日期工具类
weixin_48040732的博客
12-12 4268
记录在Vue3里面全局使用dayjs,以及将它封装为自己需要的日期工具类。
ant design vue中日期选择框混合时间选择器的用法说明
01-22
首先时间格式化用到moment方法，需要在页面中引入moment组件 import moment from ‘moment’ 结构代码： <a> triggerNode[removed] format=YYYY-MM-DD HH:mm:ss v-decorator=[ &#39;pushtime&#39;, { rules: [{ ...
antd日期选择器禁止选择当天之前的时间操作
01-22
使用disabledDate属性（不可选择的日期） 在js中定义函数并返回 //限制当天之前的日期不可选 disabledDate(current) { return current && current <moment().subtract(1, days); //当天之前的不可选，不...
vue3---dayjs-入门及常用方法
qq_56263094的博客
05-04 9154
目录 day.js下载安装 vue3的使用 导入day.js 使用 最终效果 dayjs是一个轻量的处理时间和日期的 JavaScript 库 dayjs好处 🕒 和Moment.js有着相同的API和模式 💪 不可变、持久性 🔥 提供链式调用 🌐 国际化标准 📦 超小的压缩体积，仅仅有2kb左右 👫 极大多数的浏览器兼容 官方githubgithub.com/iamkun/dayj… 中文使用文档github.com/iam.........
vue3 dayjs用法
seimeii的博客
08-16 1268
vue js获取当天日期
vue3中基于dayjs实现日历
k0933的博客
07-17 421
vue3中基于dayjs实现日历
Vue3+vite搭建基础架构（3）--- 使用dayjs
weixin_48040732的博客
02-02 1996
这里记录下在vue3里面使用dayjs，不使用ts语法，方面以后直接使用
研究 Day.js 及其在 Vue3 和 Vue 框架中的应用详解
独泪了无痕
01-22 1304
Day.js 是一个小巧且快速的 JavaScript 日期库，提供了与 Moment.js 类似的 API，但体积更小，加载速度更快。Day.js 支持多种语言，易于定制，非常适合在前端开发中处理日期和时间问题。各个传入的单位对大小写不敏感，支持缩写和复数。请注意，缩写是区分大小写的。单位缩写描述dateD日期 [1,31]dayd星期[0,6] (星期日0，星期六6)monthM月份0,11yeary年 [1,31]hourh小时 [0,23]minutem。
Vue 中使用 Day.js 时间转化插件：Vue 2 与 Vue 3 写法
前端开发探索之旅
02-17 1603
Vue 2：通过Vue.filter定义全局过滤器，或者在组件中直接引入使用。Vue 3：使用createApp创建应用实例后，通过挂载全局属性，也可在组件中直接引入。无论是 Vue 2 还是 Vue 3，Day.js 都能很好地满足日期和时间处理的需求。在 Vue 2 中，可以通过全局过滤器或局部引入的方式使用 Day.js；在 Vue 3 中，则可以借助全局属性或局部引入来实现。开发者可根据项目的具体情况和个人喜好，选择合适的使用方式。
「前端笔记」vue中使用 antd-vue 中将默认时间库 monent 改为 dayjs
雨y飘零久的博客
12-22 1731
Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js简单地说，只要你会Moment.js，那么你就会Day.js!但是我们知道的，Moment.js 的大小是200多k,Day.js的大小是2kB，100倍的差距，拥有同样强大的 API。 在 antd 中时间库默认使用 moment，修改方式这里使用一种实现方式。使用 antd-dayjs-webpack-pl
dayjs挂载到vue3全局属性上面
Yajyaj123的博客
01-19 1025
dayjs挂载到vue3全局属性上面
vue antd 时间选择器 范围
01-21
### 关于 Vue 中使用 Ant Design 的时间范围选择器 在 Vue 项目中集成 `Ant Design` 的时间范围选择器可以极大简化日期和时间的选择操作。通过引入 `a-range-picker` 组件，能够方便地实现这一功能[^1]。 #### ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Beiyux

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值