开始结束时间验证放入同一行，并单个进行验证

最新推荐文章于 2024-09-11 20:31:47 发布

qq_25501109

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量160

点赞数 3

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_25501109/article/details/136912097

版权

本文描述了如何在AntDesign和ElementUI的表单组件中，将准入开始和结束日期选择器放在同一行，并对每个日期进行独立验证，确保用户必须选择开始和结束日期。

摘要由CSDN通过智能技术生成

antd或者element 开始结束时间组件验证放入同一行，并单个进行选择验证

<div style="display: flex">
            <a-form-model-item label="准入期限:" prop="admittanceStart" class="admittanceStart">
              <a-date-picker :placeholder="'请选择开始日期'" :disabledDate="disabledDateStart"  mode="year" :open="showStartYear" v-model="stopForm.admittanceStart"
                             @openChange="changeStartOpen" @panelChange="panelStartChange" style="width: 195px">
                <template slot="renderExtraFooter">
                  <div style="float: right">
                    <a-button type="primary" size="small" :disabled="!stopForm.admittanceStart" @click="showStartYear = false">确定</a-button>
                  </div>
                </template>
              </a-date-picker>
              一
            </a-form-model-item>
            <a-form-model-item label="" prop="admittanceEnd">
              <a-date-picker :placeholder="'请选择结束日期'" :disabledDate="disabledDateEnd" mode="year" :open="showEndYear" v-model="stopForm.admittanceEnd"
                             @openChange="changeEndOpen" @panelChange="panelEndChange" style="width: 200px">
                <template slot="renderExtraFooter">
                  <div style="float: right">
                    <a-button type="primary" size="small" :disabled="!stopForm.admittanceEnd" @click="showEndYear = false">确定</a-button>
                  </div>
                </template>
              </a-date-picker>
            </a-form-model-item>
          </div>


admittanceStart: [
          { required: true, message: "请选择准入开始日期", trigger: "change" },
        ],
        admittanceEnd: [
          { required: true, message: "请选择准入结束日期", trigger: "change" },
        ],


.admittanceStart{
  display: flex;
  width: 295px;
  margin-left: 57px;
  ::v-deep .ant-form-item-label{
    width: 80px;
  }
}

实现效果：