el-date-picker中datetime类型禁用日期包含时分

最新推荐文章于 2024-07-30 10:56:44 发布

梦尘星月

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量1.1k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_40536213/article/details/132837894

版权

很坑的情况，对于datetime类型下的禁用时间，在pickerOptions中进行时间戳的禁用，却无法禁用时分

思路：

pickerOptions中的disabledDate禁用整体的日期选择
通过selectableRange来对时间范围进行禁用

缺点：还是无法禁用秒的范围

// view界面
<el-date-picker
    v-model="remindTime"
    type="datetime"
    placeholder="选择时间"
    value-format="timestamp"
    :picker-options="pickerOptions"
/>

将pickerOptions设置为计算属性，这样可以通过更新selectableRange的值，来对时间的范围进行实时的变化

computed: {
    pickerOptions() {
        return {
            disabledDate: this.disabledDate,
            selectableRange: this.selectableRange,
        }
    }
},

需要监听remindTime的值，这样可以知道日期后，动态的设定是否需要什么样的时间范围

watch: {
    remindTime(newValue, oldValue) {
        if(newValue == oldValue) {
            return;
        }
        this.selectableRange = this.timeRange(newValue);
    }
},

最后methods中实现两个方法

// disabledDate控制了日期的选择范围，例如控制从今天的日期以后30天
disabledDate(time) {
    const currentDate = new Date();
    const thirtyDaysLater = new Date();
    thirtyDaysLater.setDate(currentDate.getDate() + 30);

    return time.getTime() < (currentDate.getTime() - 60 * 60 * 1000 * 24) || time.getTime() > thirtyDaysLater.getTime();
},
// timeRange用来对当前的时间进行计算，从而给定需要的时间范围，例如如果是今天的日期，设置只能是此刻的时分以后可选
timeRange(time = null) {
    const currentTime = new Date().getTime();
    // dateFormat自制方法，用来将时间戳转换成'YYYY-MM-DD HH:mm:ss'的字符串结构
    const currentDate = dateFormat(currentTime, 'YYYY-MM-DD');
    const currentTimeStr = dateFormat(currentTime, 'HH:mm:ss');
    const formDate = time ? dateFormat(time, 'YYYY-MM-DD') : '';
    // 证明是今天的时间
    if(!time || currentDate == formDate) {
        return [`${currentTimeStr} - 23:59:59`];
    }
    return ['00:00:00 - 23:59:59'];
},

整体结构的代码如下：

<template>
    <el-date-picker
        v-model="remindTime"
        type="datetime"
        placeholder="选择时间"
        value-format="timestamp"
        :picker-options="pickerOptions"
    />
</template>
<script>
import { dateFormat } from '@/utils';
export default {
    data() {
        return {
            remindTime: null,
            selectableRange: [],
        }
    },
    computed: {
        pickerOptions() {
            return {
                disabledDate: this.disabledDate,
                selectableRange: this.selectableRange,
            }
        }
    },
    watch: {
        remindTime(newValue, oldValue) {
            if(newValue == oldValue) {
                return;
            }
            this.selectableRange = this.timeRange(newValue);
        }
    },
    methods: {
        disabledDate(time) {
            const currentDate = new Date();
            const thirtyDaysLater = new Date();
            thirtyDaysLater.setDate(currentDate.getDate() + 30);

            return time.getTime() < (currentDate.getTime() - 60 * 60 * 1000 * 24) || time.getTime() > thirtyDaysLater.getTime();
        },
        timeRange(time = null) {
            const currentTime = new Date().getTime();
            const currentDate = dateFormat(currentTime, 'YYYY-MM-DD');
            const currentTimeStr = dateFormat(currentTime, 'HH:mm:ss');
            const formDate = time ? dateFormat(time, 'YYYY-MM-DD') : '';
            if(!time || currentDate == formDate) {
                return [`${currentTimeStr} - 23:59:59`];
            }
            return ['00:00:00 - 23:59:59'];
        },
    }
}
</script>
```很坑的情况，对于datetime类型下的禁用时间，在pickerOptions中进行时间戳的禁用，却无法禁用时分

思路：
1. pickerOptions中的disabledDate禁用整体的日期选择
2. 通过selectableRange来对时间范围进行禁用

**缺点：还是无法禁用秒的范围**

```vue
// view界面
<el-date-picker
    v-model="remindTime"
    type="datetime"
    placeholder="选择时间"
    value-format="timestamp"
    :picker-options="pickerOptions"
/>