element-ui el-date-picker 时间日期组件设置时间日期范围.1

时间日期选择器官网地址


into_user_storage_time: '2022-01-12 20:05:04', // 原始时间值
new_into_user_storage_time: '时间日期选择器选择时间', // 新日期时间绑定值
要求
当前时间 > 新的时间日期 > 原始时间值
用到插件
"moment": "2.24.0"// 时间插件（也可以不用，自己转换时间格式，就是麻烦些）

注意点：
picker-options 的 disabledDate 只能设置日期的范围
设置时间范围需要用到 selectableRange

HTML

<el-date-picker
    v-model="field.new_into_user_storage_time"
    type="datetime"
    placeholder="选择日期时间"
    value-format="yyyy-MM-dd HH:mm:ss"
    :picker-options="pickerOptions"
</el-date-picker>

js

data() {
    return {
        pickerOptions: {}, // 
        field:{
            into_user_storage_time: '', // 原始时间值
            new_into_user_storage_time: '', // 新日期时间绑定值
        }
    };
},
watch: { // 深度监听 field
    field: { // 设置时间范围
        handler: function(val) {
            let time = val.new_into_user_storage_time; // 获取 - 新时间 - 的值
            if (time) {
                let oldTime = this.handleData.data.into_user_storage_time.split(' '); // 处理原始时间值
                let newTime = time.split(' '); // 处理新时间值
                let moment = this.$moment()
                    .format('YYYY-MM-DD HH:mm:ss')
                    .split(' '); // 处理当前时间值
                let selectableRange = oldTime[1] + ' - 23:59:59'; // 设置默认可选时间段
                if (newTime[0] != oldTime[0]) { // 如果新时间（当前选择时间）与原始时间不是一天，则整天的时间都可选
                    selectableRange = '00:00:00 - 23:59:59';
                }
                if (moment[0] == newTime[0]) { // 如果新时间（当前选择时间）与当前时间是一天，则可选时间为0点到现在的时间
                    selectableRange = '00:00:00 - ' + moment[1];
                }
                this.$set( // set设置pickerOptions，用于重新渲染页面
                    this.pickerOptions,
                    'selectableRange',
                    selectableRange
                );
            }
        },
        deep: true
    }
},
methods:{
    getPickerOptions() { // 只能设置日期的范围
        let timeArr = this.handleData.data.into_user_storage_time.split(' '); // 处理接收到的数据 原始时间值 into_user_storage_time
        let beforeTime = new Date(timeArr[0]).getTime(); // 获取原始时间值 - 日期 - 的时间戳
        let moment = this.$moment().format('YYYY-MM-DD'); // 获取当前 - 日期 - 的值
        moment = new Date(moment).getTime(); // 获取当前 - 日期 - 值的时间戳
        let disabledDate = time => { // picker-options 的参数（设置的是日期的范围）
            // 禁用日期 time - 日期的值
            let times = time.getTime() + 8 * 60 * 60 * 1000; // 默认new Date出来的时间是08:00,而moment插件时00:00,所以做了下处理
            return times < beforeTime || times > moment; // 不符合要求的时间都禁用掉
        };
        this.pickerOptions = { disabledDate }; // 最后赋值
    },
    handleDefaultTime() { // 设置时间日期选择器默认值，默认当前时间
        let moment = this.$moment().format('YYYY-MM-DD HH:mm:ss'); // 获取当前时间
        let oldTime = this.$moment(
            this.handleData.data.into_user_storage_time
        ).format('YYYY-MM-DD HH:mm:ss'); // 转换原始时间值格式
        if (new Date(oldTime).getTime() > new Date(moment).getTime()) { // 加了容错，如果原始时间大于当前时间，默认为初始时间，否则为当前时间 
            this.field.new_into_user_storage_time = oldTime;
        } else {
            this.field.new_into_user_storage_time = moment;
        }
    },
},