响应式网站和展示式区别,婺源旅游攻略,crm客户管理系统源码,天津网站优Ant Design Vue-------DatePicker
今天就讲讲Ant Design Vue下的控件----DatePicker 日期选择框
结合项目中的需求#xff0c;先讲一下选择年份如何使用#xff0c;需求#xff1a;
#xff08;1#xff09;将库中存的年份读出到DatePicker控件里面#xff1b;
… Ant Design Vue-------DatePicker
今天就讲讲Ant Design Vue下的控件----DatePicker 日期选择框
结合项目中的需求先讲一下选择年份如何使用需求
1将库中存的年份读出到DatePicker控件里面
2年份比较。
逻辑处理
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-itema-form-item label截止 nameendYear :rules[{ required: true, message: 请选择截止年份 }]a-date-picker v-model:valuedateInfo.endYear pickeryear :formatyearFormat //a-form-item/a-form
pickeryear 确定了选年控件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{
//主体代码
}
