vue时间选择代码(原创)

Html

Css



    {{item.time}}

.box {
	width:200px;
}
.item {
	line-height:40px;
	background:#abcdef;
	border-bottom:1px solid #000;
}
.item.active {
	background:#f0f;
}
.item.disabled {
	background:#ccc;
}

var app = new Vue({
    el: '#app',
    data: {
        list: [],
        clickNumber: 0,
        //已选择时间列表
        checkTime: [{
                start: '08:00',
                end: '09:30'
            },
            {
                start: '12:00',
                end: '13:00'
            }
        ],
        disabledList: [],
        meetingDate: '2023-11-15',

selectedItemsIndex: [],
    },
    created() {
        this.getList();
    },
    computed: {
        timeList() {
            let list = []
            this.list.forEach(item => {
                if (item.active) {
                    list.push(item)
                }
            })
            let obj = {
                start: '',
                end: ''
            }
            console.log(list, 'list');
            obj.start = list[0].time.split('-')[0]
            obj.end = list[list.length - 1].time.split('-')[1]
            return obj;
        }
    },
    methods: {
        // 根据当前日期和已选则时间列表处理选择禁用
        setDisabled() {
            this.checkTime.forEach(item => {
                this.disabledList.push(this.getTimeArr(item.start, item.end))
            })
            let currentTime = new Date();
            this.list.forEach(item => {
                this.disabledList.forEach(vitem => {
                    const hasTime = vitem.find(d => d == item.time)
                    const isBeforeTime = new Date(Date.parse(this.meetingDate + ' ' +
                        item.time.split('-')[0] + ':00')) < currentTime
                    if (hasTime || isBeforeTime) {
                        item.disabled = true
                    }
                })
            })
        },
        getList() {
            this.initTime();
            console.log(this.list, 'list');
        },
        // 根据开始结束时间获取数组中的项
        getTimeArr(start, end) {
            const list = []
            for (let home = 8; home < 18; home++) {
                const h = `0${home}`.slice(-2)
                list.push(`${h}:00-${h}:30`, `${h}:30-${`0${home+1}`.slice(-2)}:00`)
            }
            return list.slice(list.findIndex(v => v.startsWith(start)), list.findIndex(v => v.endsWith(end)) + 1)
        },
        // 构建时间数组               
        initTime() {
            const list = [];
            for (let home = 8; home < 18; home++) {
                const h = `0${home}`.slice(-2)
                list.push({
                    time: `${h}:00-${h}:30`,
                    disabled: false,
                    active: false
                }, {
                    time: `${h}:30-${`0${home+1}`.slice(-2)}:00`,
                    disabled: false,
                    active: false
                })
            }
            this.list = list;
            this.setDisabled();
        },
        clickItem(item, index) {
            if (item.disabled) {
                alert('当前为禁用时间，不可选择')
                return
            }

if (this.selectedItemsIndex.length === 0) {
                this.selectedItemsIndex.push(index)
            } else if (this.selectedItemsIndex.length === 2) {
                this.selectedItemsIndex = [index]
            } else {
                const maxIndex = Math.max(index, this.selectedItemsIndex[0])
                const minIndex = Math.min(index, this.selectedItemsIndex[0])

const rangeHasDisabled = this.list.findIndex((item, itemIndex) => itemIndex <
                    maxIndex && itemIndex > minIndex && item.disabled)

if (rangeHasDisabled > -1) {
                    this.selectedItemsIndex[0] = index
                } else {
                    this.selectedItemsIndex.push(index)
                }
            }
            this.list.forEach((tItem, tIndex) => {
                if (this.selectedItemsIndex.length === 2) {
                    if (tIndex <= Math.max(...this.selectedItemsIndex) && tIndex >= Math.min(...
                            this.selectedItemsIndex)) {
                        tItem.active = true
                    } else {
                        tItem.active = false
                    }
                } else if (this.selectedItemsIndex.length === 1) {
                    if (tIndex === this.selectedItemsIndex[0]) {
                        tItem.active = true
                    } else {
                        tItem.active = false
                    }
                }
            })
            console.log(this.timeList, 'timeList');
        }
    }
})
/****
1.小于当前时间不可被选择
2.已选时间列表禁用
3.点击两次将两次中间所有选中，但是不能跨越已禁用项目，如果跨越则选择当前项，其余取消选择
4.点击第三次当前项选中，其余项清除
****/

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

vue时间选择代码(原创)

代码描述：项目中遇到选择时间的操作，每点击两次锁定范围，并且不可跨越已禁用时间段，并且禁用当前时间之前的时间段，适用于预约会议，需要选择时间范围等场景

更新时间：2022-11-15 22:47:27
如果项目是脚手架搭建的只需要复用js部分，根据自己需求修改
1.checktime代表已经被选择的时间，用户不可选择当前时间，也不可跨越当前时间进行选择
2.meetingdate代表当前日期，当前日期之前的时间会被禁用，并且当前时间中已经被选择时间被禁用之所以提出来没有直接获取当天日期是因为如果有需求选择当前之后的日期，所以单列一个变量

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

夜微凉

相关代码

vue时间选择代码(原创)

最新