0
点赞
收藏
分享

微信扫一扫

将jar程序封装为docker镜像 shell脚本

北溟有渔夫 03-05 15:00 阅读 5

 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{

//主体代码

}

举报

相关推荐

0 条评论