<el-form-item label="日期选择">
<div class="multi-date-picker">
<div class="date-item">
<span class="dateIcon">
<el-icon><Calendar /></el-icon>
</span>
<span class="dateItem">{{ selectedList.toString() }}</span>
</div>
<!--把日期选择器隐藏起来 -->
<el-date-picker class="datePicker" v-model="formData.abroadHolidayInfo" value-format="YYYYMMDD" type="dates" @change="addDate" @blur="handleDatePickerFocus" placeholder="请选择日期"></el-date-picker>
</div>
</el-form-item>
setup(props:any) {
const state = reactive<any>({
selectedList: ['请选择'], // 用来展示
})
function handleDatePickerFocus() {
nextTick(() => {
const divInner = document.querySelector('.date-item') as HTMLHtmlElement;
const inputInner = document.querySelector('.datePicker .el-input__inner') as HTMLHtmlElement;
if (inputInner) {
inputInner.style.width = '220px';
setTimeout(() => {
// 让日期选择器是高度跟div保持一致
inputInner.style.height = `${divInner.offsetHeight}px`;
}, 100);
}
});
}
function addDate() {
const dateItemHTML = document.querySelector('.dateItem') as HTMLHtmlElement;
if (state.formData.abroadHolidayInfo) {
dateItemHTML.style.color = '#606266';
dateItemHTML.style.fontSize = '12px';
// 处理一下格式
state.selectedList = state.formData.abroadHolidayInfo.map((date: any) => {
return date.substring(0, 4) + '-' + date.substring(4, 6) + '-' + date.substring(6);
});
} else {
dateItemHTML.style.color = '#c4c7cf';
dateItemHTML.style.fontSize = '13px';
state.selectedList = ['请选择'];
}
}
onMounted(() => {
const dateItemHTML = document.querySelector('.dateItem') as HTMLHtmlElement;
if (state.formData.abroadHolidayInfo) {
dateItemHTML.style.color = '#606266';
} else {
dateItemHTML.style.color = '#c4c7cf';
dateItemHTML.style.fontSize = '13px';
}
});
}
.multi-date-picker {
display: flex;
}
.date-item {
display: flex;
border: 1px solid #dcdfe6;
border-radius: 4px;
width: 220px;
min-height: 32px;
font-size: 12px;
.dateIcon {
display: flex;
margin-top: 8px;
width: 25px;
justify-content: center;
color: #c4c7cf;
margin-left: 4px;
font-weight: bolder;
}
.dateItem {
display: flex;
flex: 1;
flex-wrap: wrap;
color: #606266;
padding-right: 10px;
}
}
<!--不能写在scoped -->
.datePicker {
position: absolute;
left: 5px;
opacity: 0;
}
文章来源地址https://www.toymoban.com/news/detail-629046.html
文章来源:https://www.toymoban.com/news/detail-629046.html
到了这里,关于日期选择器多选换行的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!