vue2.0 搭配 elementui date设置开始时间和结束时间
vue2.0 搭配 elementui date设置开始时间和结束时间
YXMBetter 发表于1个月前
vue2.0 搭配 elementui date设置开始时间和结束时间
  • 发表于 1个月前
  • 阅读 31
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

  • vue2.0 + elementui只给了time选择器的开始和结束时间的设置,可以使用minTime属性,但是date的没有给出具体的设置示例,因工作中有需要,所以设置了,写出来供大家参考使用
  • 废话不多说,小编直接上代码
//首先,在return的数据中添加两个对象,这两个属性是绑定在:picker-options上的
<template>
<div>
    <el-date-picker type="date" placeholder="开始时间" :picker-options="startDatePicker" @change="getstartTime" v-model="startTime"></el-date-picker>
 <el-date-picker type="date" placeholder="结束时间" :picker-options="endDatePicker" @change="getendTime" v-model="endTime"></el-date-picker>
</div>
</template>
<script>
//time是当前时间,getTime()获取毫秒数
//endDatePicker也是一个对象,但由于要设置其日期必须大于开始日期,故放到方法中设置,因为这里获取不到开始日期
export defalut {
    data() {
        return {
            startDatePicker:{
                disabledDate(time) {
                    return time.getTime() > Date.now()
                }
            },
            endDatePicker: this.processDate()
        }
    },
    methods: {
        //定义change方法是为了向后台传数据时获取到yyyy-MM-dd的时间格式数据,change方法直接可以得到这个格式的时间数据
        getstartTime(time) {
            this.startTime = time
        },
        getendTime(time) {
            this.endTime = time  
        },
        processDate() {
            const _this = this
            return {
                disabledDate(time) {
                    if(_this.startTime) {
                        //使用new Date转换是因为yyyy-MM-dd格式的数据没有getTime方法可使用,无法比较
                        return new Date(_this.startTime).getTime() > time.getTime()
                    }else {
                        return time.getTime() > Date.now()
                    }
                }
            }
        }
    }
}
</script>
  • 还有一个小问题,当选择的结束时间大于开始时间时,我没有办法实现同时也小于当前日期,使用&&也不行,如果有大神路过,麻烦留言一下哦,多谢啦!
共有 人打赏支持
粉丝 5
博文 118
码字总数 95907
×
YXMBetter
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: