文档章节

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

YXMBetter
 YXMBetter
发布于 2017/09/11 20:22
字数 381
阅读 158
收藏 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
昌平
程序员
elementUI中DatePicker如何将'2018-07-22'转成时间戳传给后台

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

澜岚
07/25
0
0
webpack1.x + ElementUI 初探

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

力谱宿云
2016/12/21
1K
0
Web报表工具JS开发之日期校验

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

九月你好123
2016/05/11
25
0
便携的七牛管理工具--QBox

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

lancegin
2017/08/07
3.2K
8
Vue2.0 歌手列表滚动及右侧快速入口实现

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

Nian糕
08/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Docker学习笔记

Docker Resources All In One Docker 学习资源整理

OSC_fly
7分钟前
3
0
Android 安全逆向:篡改你的位置信息

篡改你的位置信息

蔡小鹏
8分钟前
1
0
SpringMVC 全局异常处理,返回json

1.在spring-mvc.xml中增加配置: 比如我的freemarker视图定义的是:/WEB-INF/template 我的页面则放在template下的common目录下,所以下方定义的是common/500,文件扩展名根据视图定义可以忽...

Gmupload
9分钟前
1
0
一篇文章搞定前端面试

本文旨在用最通俗的语言讲述最枯燥的基本知识 面试过前端的老铁都知道,对于前端,面试官喜欢一开始先问些HTML5新增元素啊特性啊,或者是js闭包啊原型啊,或者是css垂直水平居中怎么实现啊之...

Jack088
15分钟前
3
0
ajax 轮询请求后台服务器

<script type="text/javascript"> // var i=0; //声明轮询次数变量 $(document).ready(function(){ c = window.setInterval("getResult()",10000); //间隔多少秒去触发ajax }); function get......

15834278076
18分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部