ant design vue3 日期选择器的用法

最新推荐文章于 2025-10-18 16:01:58 发布

原创最新推荐文章于 2025-10-18 16:01:58 发布 · 770 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

本文介绍了如何在Vue应用中使用AntDesignVue的a-range-picker组件创建一个带日期选择功能的表单，包括设置初始状态、禁用未来日期选项以及处理时间变化的逻辑。

<a-form-item

label="缴费周期"

name="range-picker"

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

>

<a-range-picker

:locale="locale"

:disabledDate="disabledDate"

v-model:value="formState['range-picker']"

value-format="YYYY-MM-DD"

@change="TimeChange"/>

</a-form-item>

js代码

import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';

import dayjs from 'dayjs'

const formState = reactive<any>({

startTime:'',

endTime:'',

'range-picker':[],

})

// disabledDate 需要禁用的日期

const disabledDate = (current: any) => {

return current && current <= dayjs().endOf('day')

}

// 时间的改变

const TimeChange = (e:any) => {

console.log(e, '获取选择的时间');

formState.startTime = e[0]

formState.endTime = e[1]

formState['range-picker'] = [formState.startTime, formState.endTime]

}