?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{
//主體代碼
}
)
)
)
