资讯动态

antd vue 日期控件的使用(选年份)

发布时间:2026/8/8 17:54:09 来源:尧图企业网站定制
Ant Design Vue-------DatePicker今天就讲讲Ant Design Vue下的控件----DatePicker 日期选择框结合项目中的需求先讲一下选择年份如何使用需求1将库中存的年份读出到DatePicker控件里面2年份比较。3直接使用年份控件时如何设置默认值要求默认值是去年逻辑处理1数据库两个年份起始和结束定义为number型2DTO定义类型为“int?”3前端先定义import {Dayjs} from dayjs; interface DateInfo{ id:string; startYear:Dayjs; endYear:Dayjs; }组件中声明了一个响应式状态集合import dayjs,{Dayjs} from dayjs; import {UnwrapRef,reactive} from vue; const yearFormat YYYY; const dateInfo:UnwrapRefDateInfo reactive({ id:, startYear:, endYear: });------------------模板使用控件---------------------------a-form refformRef :modeldateInfo :label-collabelCol :wrapper-col{ span: 24 } a-form-item label起始年 namestartYear :rules[{ required: true, message: 请选择起始年份 }] a-date-picker v-model:valuedateInfo.startYear pickeryear :formatyearFormat / /a-form-item a-form-item label截止 nameendYear :rules[{ required: true, message: 请选择截止年份 }] a-date-picker v-model:valuedateInfo.endYear pickeryear :formatyearFormat / /a-form-item /a-formpickeryear 确定了选年控件format:确定了日期格式我想找到最小日期最大日期的控制没找到如果有哪位大神看到了麻烦给我留个答案吧--------------------赋值-----------------------------------dateInfo.interestId myId.value;dateInfo.startYear dayjs(props.startYear.toString(), yearFormat);//props.startYear:后台取值dateInfo.endYear dayjs(props.endYear.toString(), yearFormat);----------------比较----------------------------------------if (dateInfo.startYear dayjs(dayjs().format(yearFormat), yearFormat)) {//dayjs().format(yearFormat):返回当前的年份//dayjs(日期值X,format):返回X的Dayjs类型而dayjs(日期值X).format(format):返回字符串message.error(起始时间不能小于现在的年份);} else if (dateInfo.startYear dateInfo.endYear) {message.error(起始时间不能大于终止时间);} else{//主体代码}直接使用年份控件时如何设置默认值要求默认值是去年//html: a-date-picker v-model:valueselectedYear pickeryear placeholder请选择年份 / //js import { onMounted, reactive, ref} from vue; import dayjs from dayjs; import type { Dayjs } from dayjs; const selectedYear refDayjs(); onMounted(() { selectedYear.value dayjs().subtract(1, year);//用subtract获取 });

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价