根据开始时间和结束时间生成指定间隔的时间段列表

效果图

openAllDay为false

openAllDay为true

打印结果

实现代码

time.ts

ts文件

interface GetTimePeriodOptions {
    date: string
    time: { startTime: string, endTime: string } | 'allDay'
    /** 分钟 */
    period: number
}

function format(date: Date, withHour?: boolean) {
    const year = date.getFullYear();
    const month = (date.getMonth() + 1) > 9 ? date.getMonth() + 1 : ("0" + (date.getMonth() + 1));
    const day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
    if (withHour != null && !withHour) {
        return `${year}-${month}-${day}`
    }
    const hours = date.getHours() > 9 ? date.getHours() : "0" + date.getHours();
    const minutes = date.getMinutes() > 9 ? date.getMinutes() : "0" + date.getMinutes();
    const seconds = date.getSeconds() > 9 ? date.getSeconds() : "0" + date.getSeconds();
    return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
}

interface TimePeriod {
    startTime: string,
    endTime: string
}

export const getTimePeriod = (options: GetTimePeriodOptions): TimePeriod[] => {
    const date = new Date(options.date + " 00:00:00");
    let startTimestamp: number
    let endTimestamp: number
    if (options.time == 'allDay') {
        startTimestamp = date.setHours(0, 0, 0, 0);
        endTimestamp = startTimestamp + 24 * 60 * 60 * 1000;
    } else {
        // 是否跨天
        const overDay = options.time.endTime <= options.time.startTime;
        const startDate = format(date, false)
        const endDate = overDay ? format(new Date(date.getTime() + 24 * 60 * 60 * 1000), false) : startDate;
        startTimestamp = new Date(startDate + ' ' + options.time.startTime).getTime()
        endTimestamp = new Date(endDate + ' ' + options.time.endTime).getTime()
    }
    const periods: TimePeriod[] = []
    let currentStartTimestamp = startTimestamp
    do {
        const start = new Date(currentStartTimestamp);
        currentStartTimestamp = currentStartTimestamp + options.period * 60 * 1000;
        if (currentStartTimestamp <= endTimestamp) {
            const end = new Date(currentStartTimestamp);
            periods.push({
                startTime: format(start),
                endTime: format(end),
            } as TimePeriod)
        }
    } while (currentStartTimestamp <= endTimestamp)
    return periods;
}

vue 文件

<!-- 预约弹窗 -->
<template>
<vxe-modal title="会员预约" v-model="showPop" width="640" @hide="reset">
<vxe-form :data="formData" :rules="formRules" titleAlign="right" titleWidth="80" @submit="saveBooking">
<!-- 预约时间 -->
<vxe-form-item title="预约时间" field="appointmentStartTime" span="12">
<template #default>
<vxe-pulldown ref="bookingRef" destroy-on-close transfer class="w">
<template #default>
<vxe-input v-model="formData.appointmentStartTime" type="integer" min="1" clearable
placeholder="请选择预约时间" :controls="false" @focus="$refs.bookingRef.showPanel()" />
</template>
<template #dropdown>
<view class="w550 h300">
<view class=""
style="display:flex;white-space: nowrap; padding: 0;margin: 0;overflow-y: scroll">
<view class="margin5 padding10 center-x-p30 br4 hand"
:class="`${v.date == selectDate ? 'bg-green' : 'bg-eee'}`"
v-for="(v,i) in dateList" :key="i" @click="selectDateFn(v)">
<view class="">{{ v.date }}</view>
<view class="">{{ v.week }}</view>
</view>
</view>
<s-line></s-line>
<view class="flex-wrap"
style="max-height: 200px;padding: 0 20px;margin: 0;overflow-y: scroll"
v-if="timeList.length>0">
<view class="margin5 padding10 h40 center br4 hand"
:class="`${current ==i ? 'bg-green ' : 'bg-eee dashed'}`"
v-for="(v,i) in timeList" :key="i" @click="selectTimeFn(v,i)">
<text> {{ v.startTime.slice(11,16) }} ~ {{ v.endTime.slice(11,16) }}</text>
</view>
</view>
</view>
</template>
</vxe-pulldown>
</template>
</vxe-form-item>
<!-- 底部确认取消 -->
<vxe-form-item span="24">
<view class="w right">
<vxe-button type="reset" class="w80" @click="showPop = false" content="取消" />
<vxe-button type="submit" status="primary" class="w80" content="确定" />
</view>
</vxe-form-item>
</vxe-form>
</vxe-modal>
</template>

<script>
import api from '@/_core/utils/dataBase/api.ts'; //引入接口
import weChatMsg from '@/pages/weChatMsg'; //微信消息推送
import {
getTimePeriod
} from "../time"; // 员工列表弹窗
export default {
emits: ['addSuccess'],
props: {},
data() {
return {
current: -1, //预约时间默认选当前项
showPop: false, // 显示弹窗
formData: {
remark: null
}, //门店信息
// 修改品牌弹窗数据校验
formRules: {
appointmentStartTime: [{
required: true,
message: '预约开始时间不能为空'
}],
},

memberInfo: {}, //会员详情数据
beginTime: null,
endTime: null,
isOpenAllDay: false, //是否24小时营业
dateList: [],
timeList: [],
selectDate: '',
appointmentTime: '',
selectTime: '',
keyboardShow: false,
memberId: null,
selectTimeObj: {}
};
},
methods: {
reset() {
this.memberInfo = {};
this.staffInfo = {};
this.current = -1
},
selectTimeFn(data, index) {
this.current = index
this.selectTimeObj = data
this.formData.appointmentStartTime = this.selectTimeObj.startTime.slice(5, 16) + '~' + this.selectTimeObj
.endTime.slice(11, 16)
this.$refs.bookingRef.hidePanel()
},
selectDateFn(data) {
if (this.selectTimeObj.startTime) {
this.formData.appointmentStartTime = this.selectTimeObj.startTime.slice(5, 16) + '~' + this
.selectTimeObj.endTime.slice(11, 16)
}
this.current = -1
this.selectDate = data.date;
this.getTimeList();
},
// 给外部用的的方法 $refs.xxx.show()  getPlaceOrder
async show(data) {
this.loadings('加载中', async () => {
this.formData = {}
this.appointmentTime = ''
this.selectTime = ''
this.showPop = true
this.timeList = []
this.selectDate = this.getDate().slice(5)
console.log(this.selectDate, 'this.selectDate'); // 07-17 this.selectDate
await this.getDateList()
})
},
async getDateList() {
this.dateList = this.initData(5); // 日期栏初始化
console.log(this.dateList, 'this.dateList');
await this.getTimeList()
},
async getTimeList() {
const openTime = this.cacheInfo.shopInfo.openTime
const closeTime = this.cacheInfo.shopInfo.closeTime
const openAllDay = this.cacheInfo.shopInfo.openAllDay || false
console.log(openTime, closeTime, openAllDay);
console.log(this.getDate().slice(0, 5) + this.selectDate,
'this.getDate().slice(0, 5) + this.selectDate');
this.timeList = getTimePeriod({
time: openAllDay ? "allDay" : {
startTime: openTime,
endTime: closeTime
},
period: 30, // 间隔分钟
date: this.getDate().slice(0, 5) + this.selectDate
}).filter(v => +new Date(v.startTime).getTime() >= new Date().getTime())
},
saveBooking() {
if (!this.formData.appointmentStartTime) return this.toast('请选择预约时间', 'error')
console.log(this.selectTimeObj.startTime, 'this.selectTimeObj.startTime');
console.log(this.selectTimeObj.endTime, 'this.selectTimeObj.endTime');
},
}
};
</script>

<style lang="scss" scoped></style>

补充 initData方法

//获取最近7天的日期和礼拜天数
initData(days= 7) {
const time = []
const date = new Date()

const now = date.getTime() //获取当前日期的时间戳
let timeStr = 3600 * 24 * 1000 //一天的时间戳
let obj = {
0: "今天",
1: "明天",
2: "后天"
}
for (let i = 0; i < days; i++) {
const timeObj = {}
timeObj.date = this.timeStamp(now + timeStr * i).dates //保存日期
timeObj.dates = this.timeStamp(now + timeStr * i).date //保存日期
timeObj.timeStamp = this.timeStamp(now + timeStr * i).simple //保存日期
timeObj.week = obj[i] ?? this.timeStamp(now + timeStr * i).day
time.push(timeObj)
}
return time
},

原文地址：https://blog.csdn.net/LJM51200/article/details/140318054

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！