摘要:
今天遇到需求是配送时间,时隔半个钟的排线!所以需要拼接时间!例如2024-10-08 14:30,2024-10-08 15:00,2024-10-08 15:30
<el-form-item label="配送时间:" prop="spOrderTime"><el-select v-model="form.spOrderTime" clearable style="width: 240px" @change="changeOrderTime"><!-- <el-option v-for="item in Config.selectTimeOption" :key="item.value" :label="item.label":value="item.value"></el-option> --><el-option v-for="item in Config.selectTimeOption" :key="item.index" :label="item.value":value="item.value"></el-option></el-select>
</el-form-item>
// 获取配送时间数组deliveryTimeList() {const now = dayjs();// 获取当前时间const threeDaysLater = now.add(2, 'day').endOf('day'); //3天后的日期const timePoints = [];//每个半小时整点的时间点let currentTime = now.startOf('hour');// 如果当前时间不是00分或30分,则跳到下一个半小时整点if (currentTime.minute() !== 0 && currentTime.minute() !== 30) {if (currentTime.minute() < 30) {currentTime = currentTime.set('minute', 30);} else {currentTime = currentTime.add(1, 'hour').startOf('hour');}}// 循环生成每个半小时整点的时间点let index=0while (currentTime.isBefore(threeDaysLater) || currentTime.isSame(threeDaysLater)) {timePoints.push({index:index,value:currentTime.format('YYYY-MM-DD HH:mm')});currentTime = currentTime.add(30, 'minute'); index++}// 赋值this.Config.selectTimeOption = timePointsthis.form.spOrderTime=timePoints[0].value},
el-time-select:
并且禁用当前的时间选项
<el-form-item label="配货时间:" prop="dataData"><div class="flex"><el-date-picker :disabledDate="disabledDate" v-model="formData.dataData" type="date" placeholder="选择日期" class="!w-180px !mr-10px" /><el-time-select v-model="formData.dataTime" start='00:00' step='00:30' end='currentTime' placeholder="选择时间" class="!w-148px"/></div>
</el-form-item>
import { disabledDate } from '@/utils/common'const formData = ref({dataData: "",dataTime: "",deliveryType:1,deliveryFalg:0,remark:""
})
const currentTime = ref()
currentTime.value = getCurrentTime()watch([() => formData.value.dataData, () => formData.value.dataTime], () => {if (formData.value.dataData && formData.value.dataTime) {const date = new Date(formData.value.dataData);const formattedDate = formatToDate(date);rowData.value.solDeliveryDateStr = formattedDate + ' ' + formData.value.dataTime}
})const getCurrentTime= async () => { const now = new Date();return padTime(now.getHours()) + ':' + padTime(now.getMinutes());
},
const padTime= async (value) => { return value.toString().padStart(2, '0');
}
// 禁用今天之前的日期
export const disabledDate = (time) => {// 获取当前日期const today = new Date()// 将时间转换为日期格式const currentDate = new Date(today.getFullYear(), today.getMonth(), today.getDate())// 禁用早于当前日期的日期return time.getTime() < currentDate.getTime()
}