antd vue 日期控件的使用（选年份）

 Ant Design Vue-------DatePicker

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

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

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

（2）年份比较。

逻辑处理：

（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{

//主体代码

}