el-date-picker 有效时间精确到时分秒且给有效时间添加标记

krifyFan

已于 2024-06-14 13:55:12 修改

阅读量562

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript elementui

于 2024-06-14 13:53:37 首次发布

本文链接：https://blog.csdn.net/weixin_43452622/article/details/139679605

el-date-picker实现有效日期做标记且时分秒限制选择范围

代码如下：

// html部分
<el-date-picker
    v-model="dateTime"
    type="datetime"
    :picker-options="pickerOptions"
>
</el-date-picker>


// js部分
/**
 * 回放有效日期开始时间
 */
@Prop({
    default: function() {
        return null
    },
    required: false
})
recordStartTime!: Date

/**
 * 回放有效日期结束时间
 */
@Prop({
    default: function() {
        return null
    },
    required: false
})
recordStopTime!: Date

// el-date-picker绑定的值
dateTime： number = new Date().getTime()

get choosedDate() {
   let dateObj = {
        year: new Date(this.dateTime).getFullYear(),
        month: new Date(this.dateTime).getMonth(),
        date: new Date(this.dateTime).getDate()
    }
    return JSON.stringify(dateObj)
}

@Watch('choosedDate', { immediate: true })
watchChoosedDate(newVal) {
    let dateObj = JSON.parse(newVal)
    /**
     * 开始时间限制
    */
    if (
        dateObj.year == new Date(this.recordStartTime).getFullYear() &&
        dateObj.month == new Date(this.recordStartTime).getMonth() &&
        dateObj.date == new Date(this.recordStartTime).getDate()
    ) {
        this.pickerOptions = {
            cellClassName: (time) => {
                let that = this
                if(time.getTime() > new Date(that.recordStartTime).getTime() - 8.64e7 && time.getTime() < new Date(that.recordStopTime).getTime()){
                    return 'custom_date_class';
                }
            },
            selectableRange: `${new Date(this.recordStartTime).format('hh:mm:ss')} - 23:59:59`
        }
    } 
    /**
     * 结束时间限制
     */
    else if (
        dateObj.year == new Date(this.recordStopTime).getFullYear() &&
        dateObj.month == new Date(this.recordStopTime).getMonth() &&
        dateObj.date == new Date(this.recordStopTime).getDate()
    ) {
        this.pickerOptions = {
            cellClassName: (time) => {
                let that = this
                if(time.getTime() > new Date(that.recordStartTime).getTime() - 8.64e7 && time.getTime() < new Date(that.recordStopTime).getTime()){
                    return 'custom_date_class';
                }
            },
            selectableRange: `00:00:00 - ${new Date(this.recordStopTime).format('hh:mm:ss')}`
        }
    } 
    /**
     * 其他时间
     */
    else {
        this.pickerOptions = {
            cellClassName: (time) => {
                let that = this
                if(time.getTime() > new Date(that.recordStartTime).getTime() - 8.64e7 && time.getTime() < new Date(that.recordStopTime).getTime()){
                    return 'custom_date_class';
                }
            },
            selectableRange: `00:00:00 - 23:59:59`
        }
    }
}

// css部分 给有效日期下面添加标记
<style lang="less">
.custom_date_class {
    &::after {
        content: "";
        display: block;
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 100%;
        background-color: var(--mb-main-color);
        left: 50%;
        transform: translateX(-2px);
    }
}
</style>