文档章节

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

YXMBetter
 YXMBetter
发布于 2017/09/11 20:22
字数 381
阅读 190
收藏 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
博文 170
码字总数 109537
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

PHP生成CSV之内部换行

当我们使用PHP将采集到的文件内容保存到csv文件时,往往需要将采集内容进行二次过滤处理才能得到需要的内容。比如网页中的换行符,空格符等等。 对于空格等处理起来都比较简单,这里我们单独...

豆花饭烧土豆
今天
2
0
使用 mjml 生成 thymeleaf 邮件框架模板

发邮件算是系统开发的一个基本需求了,不过搞邮件模板实在是件恶心事,估计搞过的同仁都有体会。 得支持多种客户端 支持响应式 疼彻心扉的 outlook 多数客户端只支持 inline 形式的 css 布局...

郁也风
今天
8
0
让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字: 作者:孙冬梅;以前读韩国前总统朴槿惠的著作《绝望锻炼了我》时,里面有一句话令我印象深刻,她说“在我最困难的时期,...

原创小博客
今天
4
0
JAVA-四元数类

public class Quaternion { private final double x0, x1, x2, x3; // 四元数构造函数 public Quaternion(double x0, double x1, double x2, double x3) { this.x0 = ......

Pulsar-V
今天
18
0
Xshell利用Xftp传输文件,使用pure-ftpd搭建ftp服务

Xftp传输文件 如果已经通过Xshell登录到服务器,此时可以使用快捷键ctrl+alt+f 打开Xftp并展示Xshell当前的目录,之后直接拖拽传输文件即可。 pure-ftpd搭建ftp服务 pure-ftpd要比vsftp简单,...

野雪球
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部