elementui时间选择器设置步长

时间选择器设置步长

需求：时间选择器，每15分钟设置一个步长，如图：

用官网上的写法，是可以实现：

<el-time-select
    v-model="startTime"
    :picker-options="{
        start: '08:30',
        step: '00:15',
        end: '24:00'
    }"
    placeholder="选择开始时间"
>
</el-time-select>
<span>至</span>
<el-time-select
    v-model="endTime"
    :picker-options="{
        start: '08:30',
        step: '00:15',
        end: '24:00',
        minTime: startTime
    }"
    placeholder="选择结束时间"
>
</el-time-select>

不过会出现一个问题，minTime小于绑定的时间都会被禁用，官方解释：

也就是说，开始时间选择了9：00，结束时间就不能是9：00，只能从9：15分开始选，如果需要包含绑定的时间(包含9:00)，只能通过时间戳去计算了(当然还有其它更好的方法)，实现方法：

<template>
    <div class="dateForm">
        <el-time-select
            v-model="startTime"
            :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '24:00'
            }"
            placeholder="选择开始时间"
        >
        </el-time-select>
        <span>至</span>
        <el-time-select
            v-model="endTime"
            :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '24:00',
                minTime: handleTime
            }"
            placeholder="选择结束时间"
        >
        </el-time-select>
    </div>
</template>

<script>
export default {
    data() {
        return {
            startTime: "",
            endTime: "",
            handleTime: ""
        };
    },
    watch: {
        startTime(nval) {
            if (nval) {
                this.endTime = "";
                let startCount = this.countDown(nval); //当前时间戳
                let handleCount = startCount - 900; //15分钟前的时间戳
                this.handleTime = this.getTime(handleCount);
            }
        }
    },
    methods: {
        //转换时间戳
        countDown(time) {
            let s = 0;
            let hour = time.split(":")[0];
            let min = time.split(":")[1];
            s = Number(hour * 3600) + Number(min * 60);
            return s;
        },
        //转换时间
        getTime(count) {
            let date = new Date(count);
            let h = parseInt((date / 60 / 60) % 24);
            let m = parseInt((date / 60) % 60);
            h = h < 10 ? "0" + h : h;
            m = m < 10 ? "0" + m : m;
            return h + ":" + m;
        }
    }
};
</script>

<style lang="less" scoped>
.dateForm {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

疑点：不知道是什么原因，el-time-select添加了is-range属性后没办法实现步长