jeecgboot vue3使用DatePicker组件设置可用日期

最新推荐文章于 2024-05-03 11:08:18 发布

平芜尽处是春山-

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量1k

点赞数 1

分类专栏： # 前端记录文章标签： vue.js jeecgboot

本文链接：https://blog.csdn.net/weixin_44934104/article/details/132579376

版权

前端记录专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文档： Ant Design Vue文档

设置不能选择今天之前的日期

（1）使用表单的formSchema中的componentProps组件属性通过disabledDate设置

import dayjs, {Dayjs} from "dayjs";

  {
    label: '日期',
    field: 'guidDate',
    component: 'DatePicker',
    dynamicRules: ({model, schema}) => {
      return [
        {required: true, message: '请输入日期!'},
      ];
    },
    componentProps: ({formModel}) => {
      return {
        format: 'YYYY-MM-DD',
        disabledDate: (current: Dayjs) => {
          return current && current < dayjs().add(-1, 'day').endOf('day');
        },
      }
    }
  },

（2）使用插槽slot方式实现

 {
      field: 'guidDate',
      label: '起保日期',
      slot: 'customSlot', //设置slot的值
      component: 'DatePicker',
      rules: [{required: true, message: '日期不能为空'}],
  }

   <BasicForm @register="registerForm" id="formLabel">
     <template #customSlot="{ model, field }">
        <a-date-picker v-model:value="model[field]"  :disabled-date="disabledDate" :disabled-time="disabledDateTime" @change="dateChange"
                       format="YYYY-MM-DD HH:mm:ss" placeholder="日期"/>
      </template>
    </BasicForm>


/*开始时间*/
import dayjs, {Dayjs} from "dayjs";
const disabledDate = (current: Dayjs) => {
  return current && current < dayjs().add(-1, 'day').endOf('day');
};