Ant Design Vue-------DatePicker

今天就讲讲Ant Design Vue下的控件----DatePicker 日期选择框

结合项目中的需求，先讲一下选择年份如何使用，需求：

（1）将库中存的年份读出到DatePicker控件里面；

（2）年份比较。

（3）直接使用年份控件时，如何设置默认值，要求默认值是去年

逻辑处理：

（1）数据库两个年份，起始和结束，定义为number型；

（2）DTO定义类型为“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:UnwrapRef<DateInfo> = reactive({ id:'', startYear:'', endYear:'' });

------------------模板使用控件---------------------------

<a-form ref="formRef" :model="dateInfo" :label-col="labelCol" :wrapper-col="{ span: 24 }"> <a-form-item label="起始年" name="startYear" :rules="[{ required: true, message: '请选择起始年份' }]"> <a-date-picker v-model:value="dateInfo.startYear" picker="year" :format="yearFormat" /> </a-form-item> <a-form-item label="截止" name="endYear" :rules="[{ required: true, message: '请选择截止年份' }]"> <a-date-picker v-model:value="dateInfo.endYear" picker="year" :format="yearFormat" /> </a-form-item> </a-form>

picker="year" 确定了选年控件；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:value="selectedYear" picker="year" placeholder="请选择年份" /> //js import { onMounted, reactive, ref} from 'vue'; import dayjs from 'dayjs'; import type { Dayjs } from 'dayjs'; const selectedYear = ref<Dayjs>(); onMounted(() => { selectedYear.value = dayjs().subtract(1, 'year');//用subtract获取 });