文档章节

vue2.0 搭配 elementui date设置开始时间和结束时间

YXMBetter
 YXMBetter
发布于 2017/09/11 20:22
字数 381
阅读 136
收藏 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>
  • 还有一个小问题,当选择的结束时间大于开始时间时,我没有办法实现同时也小于当前日期,使用&&也不行,如果有大神路过,麻烦留言一下哦,多谢啦!

© 著作权归作者所有

共有 人打赏支持
YXMBetter
粉丝 9
博文 164
码字总数 107360
作品 0
昌平
程序员
webpack1.x + ElementUI 初探

前言 ElementUI 目前版本是1.1,虽然还在1.x阶段,但是组件种类已经很丰富了,用来ElementUI 做管理页面,非常合适。本文介绍在真正开始使用ElementUI 之前的准备工作,适合第一次使用webpa...

力谱宿云
2016/12/21
1K
0
elementUI中DatePicker如何将'2018-07-22'转成时间戳传给后台

一、需求   一直以来都没有总结的习惯,所以很多知识其实在项目中都用过但自己还是想不起来。所以现在要学着抽出时间去总结。下面说下这个知识点的来由。(我们项目用的是elementUI组件) ...

澜岚
07/25
0
0
便携的七牛管理工具--QBox

QBox是一款方便的七牛仓库以及文件管理工具,是一款可以跨平台运行在OS X,Linux以及Windows系统的开源软件。 QBox项目基于Vue2.0开发,前端组件采用ElementUI,由electron打包成桌面客户端。...

lancegin
2017/08/07
3.2K
8
Web报表工具JS开发之日期校验

在报表开发过程中,我们常常需要对查询界面进行日期校验。例如有两个参数:开始日期和结束日期,我们要校验的是:开始日期与结束日期不能为空,结束日期必须在开始日期之后以及结束日期必须在...

九月你好123
2016/05/11
25
0
Vue2.0 歌手列表滚动及右侧快速入口实现

本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点部分,均有所更改和删减,关于更多 Vue ...

Nian糕
08/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

angular 解决其他电脑不能访问的问题。

ng serve --host 0.0.0.0 --disable-host-check

miaojiangmin
今天
1
0
优酷视频文件怎么转换格式

  以前在优酷上下载视频都只是在手机上观看,但随着科技的发展,对于视频的要求也逐渐增多,不再只是观看视频那么简单,在精彩的部分还会将其单独分割出来,然后进行视频剪辑,可以做出我们...

萤火的萤火
今天
0
0
数据结构:散列

在一个数据结构中查找key元素,用顺序查找、二分查找都需要经过一系列关键之比较才能查找到结果,平均查找长度与数据量有关,元素越多比较次数就越多。 如果根据元素的关键字就能知道元素的存...

京一
今天
0
0
Apache RocketMQ 正式开源分布式事务消息

近日,Apache RocketMQ 社区正式发布4.3版本。此次发布不仅包括提升性能,减少内存使用等原有特性增强,还修复了部分社区提出的若干问题,更重要的是该版本开源了社区最为关心的分布式事务消...

阿里云云栖社区
今天
30
0
使用JavaScript和MQTT开发物联网应用

如果说Java和C#哪个是最好的开发语言,无疑会挑起程序员之间的相互怒怼,那如果说JavaScript是动态性最好的语言,相信大家都不会有太大的争议。随着越来越多的硬件平台和开发板开始支持JavaS...

少年不搬砖老大徒伤悲
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部