Ant Design Vue日期选择器 使用v-decorator进行设置

目录

第一步

导入库
//设置中文
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import moment from 'moment'
使用
data(){
	return {
	    form: this.$form.createForm(this),
		mdoel: {formatDate:'2022-1-1',description:'Hello World'}
	}
}
a-date-picker
              style="width: 100%"
              :locale="locale"
              v-decorator="['formatDate', { rules: [{ required: true, message: '请选择日期' }] }]"
            />

第二步

设置值

在你的methods中或者watch中

this.form.setFieldsValue(this.model);
// 日期格式需要单独设置才有效果
this.$nextTick(() => {
        this.form.setFieldsValue({
        formatDate: moment(this.model.formatDate)
    })
})

效果

在这里插入图片描述

就能成功设置值了

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Ant Design Vue是一个基于Vue.js的UI组件库,其中包含了许多实用的组件。在Ant Design Vue中,日期选择器是一个常用的组件之一。如果需要禁用之前的日期,可以通过以下方式实现: 1. 使用disabledDate属性: 在Ant Design Vue中,日期选择器组件提供了一个属性叫做disabledDate,可以用来禁用一些日期。具体做法是,在日期选择器中添加disabledDate属性,并且将其值设置为一个函数,这个函数会接收一个当前日期的参数,需要在函数中对这个参数进行判断,如果符合禁用的条件,则返回true,否则返回false。 2. 结合moment.js使用: 如果需要禁用之前的日期,可以借助moment.js这个第三方库来实现,在Ant Design Vue中,日期选择器组件内部使用了moment.js进行日期处理,因此我们可以在disabledDate函数中使用moment.js提供的一些方法来判断当前日期是否符合要求。 下面是一个实现禁用之前日期的示例代码: ``` <template> <a-date-picker :disabled-date="disabledDate"></a-date-picker> </template> <script> import moment from 'moment'; // 引入moment.js库 export default { data() { return {}; }, methods: { // 禁用之前的日期 disabledDate(current) { return current && current < moment().endOf('day'); } } }; </script> ``` 以上就是Ant Design Vue日期选择器禁用之前日期的实现方法,通过设置disabledDate属性,可以有效地限制用户选择的日期范围。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值