工夫日期抉择器官网地址


into_user_storage_time: '2022-01-12 20:05:04', // 原始工夫值
new_into_user_storage_time: '工夫日期选择器抉择工夫', // 新日期工夫绑定值
要求
以后工夫 > 新的工夫日期 > 原始工夫值
用到插件
"moment": "2.24.0"// 工夫插件(也能够不必,本人转换工夫格局,就是麻烦些)
留神点:
picker-optionsdisabledDate 只能设置日期的范畴
设置工夫范畴须要用到 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;        }    },},