Vue iView时间组件DatePicker，设置开始时间和结束时间约束、初始值和格式（年月日）

最新推荐文章于 2023-11-07 11:38:55 发布

原创最新推荐文章于 2023-11-07 11:38:55 发布 · 3.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #vue #datepicker

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Vue iView中使用DatePicker组件设置开始和结束时间的约束，以及如何为组件分配初始值和时间格式。通过HTML和JS代码示例，详细解释了在computed属性中定义startOption和endOption的必要性，以及如何解决开始时间改变后结束时间约束延迟生效的问题。同时，展示了如何为开始时间赋予当前时间作为初始值，并指出了虽然format属性可以设置显示格式，但获取的仍然是中国标准时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码：

<FormItem label="开始时间">
    <DatePicker 
        type="date" 
        :options="startOption" 
        v-model="createForm.startDate"
    ></DatePicker>
</FormItem>
<FormItem label="结束时间">
    <DatePicker 
        type="date" 
        :options="endOption" 
        v-model="createForm.endDate"
    ></DatePicker>
</FormItem>

JS代码：

computed: {
    // 设置不可选择的日期，option的disabledDate属性
    startOption: (date) => {
        let endTime = new Date(this.createForm.endDate).valueOf();
        // 如返回的日期为true，则该日期处于禁止状态
        return date && date.valueOf() > endTime;
    },
    endOption: (date) => {
        let startTime = new Date(this.createForm.startDate).valueOf();
        return date && date.valueOf() < startTime;
    }
}

注意：

（1）startOption和endOption要与在html代码里面写的:options一致；

（2）上面的内容其实也可以直接写在data()的里面，只是规范的写法是写在computed里面，代码如下：

export default {
    data() {
        startOption: {
            disabledDate: (date) => {
                let data = '';
                if(this.createForm.endDate != '') {
                    data = this.createForm.endDate;
                } else {
                    return
                }
                return date > data;
            }
        },
        endOption: {
            disabledDate: (date) => {
                let data = this.createForm.startDate == "" ? "" : this.createForm.startDate;
                return date < data;
            }
        }
    }
}

但是，直接写在date()会有一个问题，那就是如果开始时间赋予初始值，那么在改变开始时间后，结束时间的约束会在选择往后才生效，所以还是用computed里面的方法比较好。

赋予开始时间当前时间初始值（JS代码）：

methods: {
    // 打开创建页面，赋予开始时间当前时间作为初始值
    handleCreate() {
        this.createForm.startDate = this.getNowFormDate(new Date());
    },
    // 创建页面数据提交，进行日期时间格式化，解决提交时间比设置时间慢一天的问题
    // 这是因为iview的时间选择器绑定后获取的值是中国标准时间，不是我们想要的标准时间
    handleSubmit() {
        let startDate = this.getNowFormDate(this.createForm.startDate);
        let endDate = this.getNowFormDate(this.createForm.endDate);
    },
    // 日期格式转换
    getNowFormDate(date) {
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if(month >= 1 && month <= 9) {
            month = '0' + month;
        }
        if(day >= 1 && day <= 9) {
            day = '0' + day;
        }
        let currentdate = '${year}-${month}-${day}';
        return currentdate;
    }
}

虽然，iview时间选择器有一个formate属性，可以设置显示的时间格式，但是获取到的还是中国标准时间，所以就直接用这种方法。