ant design vue3 日期选择器的用法

原创已于 2024-02-29 22:51:25 修改 · 666 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

于 2024-02-29 22:37:56 首次发布

本文介绍了如何在使用AntDesign的A-Form-Item组件中，通过`rentType`变量动态控制日期范围选择器的禁用状态，并利用dayjs库处理日期。作者展示了如何禁用起始日期和允许结束日期的选择。

需求：实现前面的日期禁用，后面的可选

<a-form-item

label="缴费周期"

name="range-picker"

:rules="[{ required: true, message: '请选择日期' }]"

>

<a-range-picker :disabled="rentType === 1 ? [true, false] : [false, false]" :locale="locale" :disabledDate="disabledDate" v-model:value="formState['range-picker']" value-format="YYYY-MM-DD" @change="TimeChange"/>

</a-form-item>

// dayjs日期添加一天的写法：

formState2.cardStartDate = dayjs().add(1, 'day').format('YYYY-MM-DD');

formState2.cardEndDate = '';

formState2['range-picker'] = [res.data.cardStartDate, res.data.cardEndDate];

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lenmonyang

关注关注

7
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Python私教张大鹏 Vue3整合AntDesignVue之DatePicker 日期选择框

未来已来，AI时代，学AI编程，做AI量化，就来大鹏AI教育。

06-13

1414

【代码】Python私教张大鹏 Vue3整合AntDesignVue之DatePicker 日期选择框。

Vant组件库+Vue3，时间选择组件，开始时间结束时间交互

xll20000811的博客

12-12

2005

上次分享了element plus 的时间选择组件的交互，这次分享一下Vant组件库的做法。需求是差不多的：1.选择的结束时间要在开始时间之后，用户不选择开始时间之前不能让他选择结束时间。（这个需求在项目中有很多地方用到，所以时间格式这个js就单独提出来一个文件放在utils中）不选择开始时间之前不能选择结束时间。选择的结束时间在开始时间之后。

参与评论您还未登录，请先登录后发表或查看评论

Vue3使用fullcalendar日历插件

m0_65544665的博客

10-07

3976

Vue3使用fullcalendar日历插件

Ant Design Vue 日期选择器，绑定的日期和框内不一致，日期格式化

芯_v_648374雨馨博客

03-31

1336

moment是个js时间格式化的库自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

精选资源

ant design vue中日期选择框混合时间选择器的用法说明

01-22

首先时间格式化用到moment方法，需要在页面中引入moment组件 import moment from ‘moment’ 结构代码： <a> triggerNode[removed] format=YYYY-MM-DD HH:mm:ss v-decorator=[ 'pushtime', { rules: [{ ...

精选资源

ant design vue datepicker日期选择器中文化操作

01-18

按照ant design vue官方说明，使用日期选择器需要在入口文件(main.js)全局设置语言： // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale import moment from 'moment'; import 'moment/...

精选资源

(实习日记)Ant Design Vue日期选择器，禁止选择当前之前的时间

01-08

Ant Desugn Vue的时间选择器，实习也有一段时间了，也遇到了一些问题，就想记录一下，自认为水平不是很高，欢迎批评指正 //标签 data() { return { Survey: {},//存放截止时间 disabledTime: { hour: '',//存放...

Ant design vue 的组件禁用属性 disabled.pdf

12-16

在Ant Design Vue这一流行的前端UI库中，`disabled`属性是一个关键特性，它允许开发者禁用用户对特定组件的操作，从而实现对用户交互的控制。禁用状态通常用于表示组件处于不可操作或非活动状态，这在许多场景下都是...

基于vue Ant-Design 的表单设计器.zip

12-26

使用Vue.js Ant-Design 表单设计器，开发者可以极大地提高工作效率，减少重复编码工作，同时还能保证表单界面的专业美观。如果你正在寻找一个强大的表单解决方案，这个基于Vue和Ant Design的表单设计器无疑是一个...

vue3-persian-datetime-picker:这是一个Vue3版本的vue3-persian-datetime-picker

03-16

vue3-波斯日期时间选择器一个vue3插件选择从杰拉里日期和时间从迁移运行这个项目 # 安装依赖 yarn # OR npm install # 启动服务 yarn serve # OR npm run serve 迁移档案 1，VuePersianDatetimePicker.vue：①模型=> modelValue②发射（输入）=> this。$ emit（'update：modelValue'，val）③注释this。$ forceUpdate（）//可能会产生错误2，样式。 scss：[disabled] => [disabled ='true'] ...'xxxdisabled'无法处理3，_transitions.scss：-leave-to .. -enter => -leave-to .. -enter-from 用法 main.js import VuePers

vue3+ant design vue3+ts 日期选择框DatePicker预设常用的日期范围封装自用

qq_43574615的博客

11-13

1859

ant-design-vue3日期选择框

ant design vue datepicker日期选择器中文化

Femi的博客欢迎大家

04-29

7402

按照ant design vue官方说明，使用日期选择器需要在入口文件(main.js)全局设置语言： // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); <a-date-picke...

Ant Design of Vue 时间选择器（时间限定）

qq_38743783的博客

09-13

2392

Ant Design of Vue 时间选择跨度最多选七天(选完开始时间，决定时间段限定)Ant Design of Vue 时间选择最多选七天（直接限定开始和结束时间）

ant-design-vue的日期选择器默认时间的时分秒

前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！

11-07

1518

如果是选择单日期的情况下，就使用。双日期的情况下使用下面这种。使用前需要引入moment。

关于ant design vue2版本的时间选择器

yyf8259的博客

08-26

2124

ant design vue2 时间选择器

Ant Design Vue中日期选择器快捷选择 presets 用法

最新发布

weixin_46607967的博客

07-22

848

范围选择时可接受一个数组具体参考。ant写文档的纯懒狗。话不多说直接上代码。

vue3+ant-design-vue a-range-picker设置可选时间和默认时间

chocolate_nan的博客

11-16

4940

vue3+ant-design-vue a-range-picker设置可选时间和默认时间

ant design vue3 日期选择器 disabledtime

09-06

在 Ant Design Vue3 中，日期选择器的 `disabledTime` 属性可以用于设置禁用时间范围。该属性可以是一个函数，也可以是一个数组。如果 `disabledTime` 为函数，则函数接收一个参数 `current`，表示当前选择的日期。函数的返回值是一个对象，其中 `disabledHours` 和 `disabledMinutes` 属性分别表示禁用的小时和分钟的范围。例如，我们可以通过以下方式来禁用日期选择器中某些时间段： ```javascript <template> <a-date-picker :disabledTime="disabledTime"></a-date-picker> </template> <script> export default { methods: { disabledTime(current) { if (current && current.hour() < 9) { return { disabledHours: () => [...Array(9).keys()], disabledMinutes: () => [] }; } else if (current && current.hour() >= 18) { return { disabledHours: () => [...Array(24 - 18).keys()], disabledMinutes: () => [] }; } else { // 其他情况不禁用 return { disabledHours: () => [], disabledMinutes: () => [] }; } } } }; </script> ``` 上述代码中，我们禁用了选择时间早于上午9点和晚于下午6点的时间范围。如果 `disabledTime` 为数组，则数组中的元素表示禁用的时间段，每个时间段是一个对象，包括 `start` 和 `end` 属性表示时间段的开始和结束时间。例如，我们可以通过以下方式来禁用日期选择器中某些特定的时间段： ```javascript <template> <a-date-picker :disabledTime="disabledTime"></a-date-picker> </template> <script> export default { data() { return { disabledTime: [ { start: moment('2022-01-01 09:00:00'), end: moment('2022-01-01 12:00:00') }, { start: moment('2022-01-01 14:00:00'), end: moment('2022-01-01 18:00:00') } ] }; } }; </script> ``` 上述代码中，我们禁用了 2022 年 1 月 1 日上午9点到中午12点和下午2点到晚上6点的时间范围。以上就是 Ant Design Vue3 中使用 `disabledTime` 属性设置日期选择器禁用时间范围的方法。