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;
}
}
实现效果: