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

最新推荐文章于 2024-04-08 16:16:53 发布
VIP文章 最新推荐文章于 2024-04-08 16:16:53 发布
阅读量3.8k 收藏 8
点赞数 2
分类专栏： Vue 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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,
最低0.47元/天 解锁文章
Beiyux
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue-antd-admin:基于vue3 + antd + JavaScript的后台系统
03-11
vue-antd-admin 欢迎使用vue-antd-admin，这是一个基于vue3.0 + antd2.0.0 + vuex4.0 + vue-router4.0的适合新手学习的项目，后台全部采用了composition API的写法，作者也只是个刚出学校的初级菜鸟前端，在vue3的路上不断摸索，不断踩坑，目前的想法是效仿vue-element-admin做一个通用后台，数据使用嘲笑数据，未来会考虑采取ts重组。 antd用的是2.0.0官方文档查看这里 vue3文档查看这里 1，使用成分API 2，使用antd 2.0.0版 3，支持模拟数据 4，支持嵌入式菜单 yarn install 如果纱线安装依赖失败，请删除yarn.lock执行npm install来安装依赖 yarn serve yarn build
vue3+vite+antd 后台管理系统基础模板
02-06
vue3+vite+antd后台管理系统 vue3 vite antd 后台管理系统 基础模板 vite秒启动 弃用webpack，解决启动加载过慢的问题
antd时间范围预设，使用dayjs取 本周、本月、本年、本季度、上季度。
weixin_43801428的博客
04-24 1581
dayjs取 本周、上周、本月、上月、本季度、上季度时间段
vue vue3 日期选择的组件，封装组件
最新发布
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
04-08 502
基于element的日期选择组件，以下是达到的效果： 1.选择年，日期选择组件默认填充是：当时的年； 2.选择月，日期选择组件默认填充的是：当时的年月； 3.选择日，日期选择组件默认填充的是：当时的年月日；
vue3 PC端项目构建，vue3+antd+vite+pinia+axios+sass
02-08
该架构已解决大部分坑，文章地址：https://blog.csdn.net/randy521520/article/details/136151816 在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、vue3，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理等功能 vue3：https://cn.vuejs.org/ vant：https://vant-contrib.gitee.io/vant/#/zh-CN axios：https://www.axios-http.cn/docs/api_intro antd：https://www.antdv.com/components/config-provider-cn sass：https://blog.csdn.net/randy521520/article/details/131242242 pinia：https://pinia.vuejs.org/zh/
vue3+vite+monorepo+qiankun+pnpm+vue-i18n、lodash、dayjs、windicss
08-05
vue3+vite+monorepo+qiankun+pnpm+vue-i18n、lodash、dayjs、windicss vue3+vite+monorepo+qiankun+pnpm+vue-i18n、lodash、dayjs、windicss vue3+vite+monorepo+qiankun+pnpm+vue-i18n、lodash、dayjs、windicss vue3+vite+monorepo+qiankun+pnpm+vue-i18n、lodash、dayjs、windicss vue3+vite+monorepo+qiankun+pnpm+vue-i18n、lodash、dayjs、windicss vue3+vite+monorepo+qiankun+pnpm+vue-i18n、lodash、dayjs、windicss vue3+vite+monorepo+qiankun+pnpm+vue-i18n、lodash、dayjs、windicss
vue3---dayjs-入门及常用方法
qq_56263094的博客
05-04 8721
目录 day.js下载安装 vue3的使用 导入day.js 使用 最终效果 dayjs是一个轻量的处理时间和日期的 JavaScript 库 dayjs好处 🕒 和Moment.js有着相同的API和模式 💪 不可变、持久性 🔥 提供链式调用 🌐 国际化标准 📦 超小的压缩体积，仅仅有2kb左右 👫 极大多数的浏览器兼容 官方githubgithub.com/iamkun/dayj… 中文使用文档github.com/iam.........
vue3使用dayjs
m0_53912016的博客
03-11 5064
安装配置
Vue中使用dayjs
热门推荐
~~
07-19 1万+
dayjs中文网Day.js中文网Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。https单位不区分大小写，支持复数和缩写形式把dayjs()对象当成一个中转站，往后所有的关于日期的计算都先转成dayjs()对象，再进行加减等运行。...
Vue3使用dayjs以及dayjs日期工具类
weixin_48040732的博客
12-12 2725
记录在Vue3里面全局使用dayjs,以及将它封装为自己需要的日期工具类。
vue3-用dayjs将时间戳转为年月日格式
weixin_42479421的博客
05-14 1万+
已知，格式化时间：dayjs(cellValue).format('YYYY-MM-DD') 用法： import dayjs from 'dayjs'; dayjs(时间戳).format('YYYY-MM-DD HH:mm:ss'); 如，在get请求中使用： service.get('/trace/'+sourceSearchInput.value).then(res => { dialogSearchResult.value.push(res); //返回对象，.
vue3.2 + antd vue3. 基于vue3.2 + antd vue3的后台管理系统.zip
12-31
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。
基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板
10-15
使用了Vue3.0全家桶、ant-design-vue2.0和typescript4.0，实践vue3.0的新特性
关于使用Antd中的DatePicker出现的日期格式转化问题(Dayjs和Momentjs)
qq_41453709的博客
03-18 1万+
在测试过程中发现了一个比较有意思的bug问题，我们使用的是antd中的DatePicker组件，当时间选择框存在已经设定的初始值后，点击时间选择框直接报错，但是当清除内容或者处于新建没有默认值的情况下，组件可以正常运行。 (以下是使用的时间范围组件展示)
antd时间组件Datepicker day.js 替换 Moment.js
qq_29118071的博客
01-04 574
关于具体造成问题的原因，从issue下面的回复有人提到是因为在node_modules中存在了两个dayjs，一个是原本通过npm或yarn引入的dayjs依赖，但是看了官方修复也只是把原先引入的固定版本的dayjs转变成了一个更加广泛的1.x版本，并没有删除这个依赖，所以目前具体原因不清楚。Moment.js 的大小是200多k,Day.js的大小是2kB，100倍的差距，拥有同样强大的 API。另一个存在于rc-picker中的依赖(也就是antd引入的时间相关的组件模块)，自定义导出dayjs。
解决前端项目问题：时间格式化dayjs在vue里的使用，与后端进行交互
意初的博客
09-28 1529
使用 day.js，使用 npm安装：npm install dayjs --save1.执行安装依赖2.引入分为两种方法 第一个是在单文件里导入xxx.vue里面引入第二个全局引入是在main.js里引用3.获取当前时间格式化4.搭配后端接口使用，将时间格式化传给后端，即可获取需要的数据。
vue3 dayjs用法
seimeii的博客
08-16 929
vue js获取当天日期
vue3使用dayjs以及dayjs日期工具类
weixin_45128657的博客
03-01 568
Vue3使用dayjs全局使用以及将dayjs封装为自己需要的日期工具类。
VueApi-03
Jack94727的博客
07-03 485
Vue.js - Day3 定义Vue组件 什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可； 组件化和模块化的不同： + 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一； + 组件化： 是从UI界面的角度进行划分的；前端的组件化，方...
vue+iview ui库table组件中添加可选日期选择器和input输入框
05-31
可以使用iview UI库中的DatePicker和Input组件结合Table组件来实现你的需求。 首先，在Table组件中定义需要添加DatePicker和Input的列。 例如： ```html 日期"> <DatePicker v-model="row.date"></...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Beiyux

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

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

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

打赏作者

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

抵扣说明：

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

余额充值