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

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


    在这里插入图片描述
    代码如下： 

    // html部分




// 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部分 给有效日期下面添加标记
  • 相关阅读:
    每天五分钟机器学习：数据和特征决定机器学习的上限（特征工程）
    如何隐藏删除去除桌面图标快捷方式的小箭头(含恢复方法)
    C++算法：接雨水
    『PyQt5-Qt Designer篇』｜ 10 Qt Designer中控件的尺寸相关设置（sizePolicy策略）
    【黄啊码】什么是php-fpm？
    Go基础 Map
    无心剑英汉双语诗004.《静心》
    java项目快速打包镜像到docker服务器
    Nginx超时配置
    【postgresql】角色（Role）
  • 原文地址：https://blog.csdn.net/weixin_43452622/article/details/139679605