文档章节

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

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

© 著作权归作者所有

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

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

力谱宿云 ⋅ 2016/12/21 ⋅ 0

便携的七牛管理工具--QBox

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

lancegin ⋅ 2017/08/07 ⋅ 8

Web报表工具JS开发之日期校验

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

九月你好123 ⋅ 2016/05/11 ⋅ 0

vue2.0-基于elementui换肤[自定义主题]

直接上 预览链接 vue2.0-基于elementui换肤[自定义主题] 1. 项目增加主题组件 在项目的src/components下添加skin文件夹 skin文件获取地址(https://github.com/mgbq/vue-permission/tree/mast...

mgbq ⋅ 05/03 ⋅ 0

MySQL数据按年、月、天分组查询数据

SQL语句: SELECT DATE_FORMAT(date,'%Y-%m-%d') as day, //格式化日期 avg(commentstarlevel) as avgLevel //分组后需要查询的数据 FROM livi_comment WHERE date >= '2016-1-01' AND help......

北國丶江山 ⋅ 2016/09/20 ⋅ 0

java定时工具的辟谣

网络上关于java定时器的文章真的是错误百出,给我的学习造成了很大的困扰,Timer根本就没有线程安全问题,Timer的所有调度方法都和上次任务的结束时间没有关系,TImer和ScheduledThreadPoolExec...

肥肥小浣熊 ⋅ 2017/11/20 ⋅ 0

bootstrapdatetimepicker插件汉化、日期初始化等使用记录

两个表单元素:开始日期和结束日期,先汉化。然后把开始日期的初始化时间设置为当月第一天,结束日期的初始化时间为当月最后一天。 $.fn.datetimepicker.dates['zh-CN'] = { days: ["星期日"...

Ethel_oo ⋅ 04/21 ⋅ 0

DateTools,可能是最好用的iOS日期工具库

项目简介 DateTools 用于提高Objective-C中日期和时间相关操作的效率.灵感来源于 DateTime.aspx)和Time Period Library. 项目主页: DateTools 最新示例: 点击下载 工程简议: 支持国际化,支持...

ios122 ⋅ 2015/09/25 ⋅ 2

18 行 JS 代码编一个倒时器

有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备。不管你是否有一次约会,销售、促销、或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成...

呵呵闯 ⋅ 2016/08/04 ⋅ 0

两个日期比较!有点问题求指教

最近做一个日期比较: 结束时间不能小于开始时间。 第一次输入结束时间小于开始时间没反应。第二次输入后,却拿到第一次的值,然后才提示不能小于开始时间,底下是我写的js: function duibi...

于明亮 ⋅ 2013/01/18 ⋅ 2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud构建微服务架构—创建“服务注册中心”

创建一个基础的Spring Boot工程,命名为eureka-server,并在pom.xml中引入需要的依赖内容: <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-par......

itcloud ⋅ 22分钟前 ⋅ 0

拖动

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>event</title> <style> #box { width: 100px; height: 100px; background-color: aquamarine; position: absolute; } </style......

fyliujj ⋅ 24分钟前 ⋅ 0

es6 polyfill array

polyfill之javascript函数的兼容写法——Array篇 1. Array.isArray(obj) if (!Array.isArray) { Array.isArray = function(arg) { return Object.prototype.toString.call(arg) === '[objec......

球球 ⋅ 26分钟前 ⋅ 0

kibana启动异常

检查一下:kibana.yml 每一对key:value中,冒号之后应有空格。

增删改查1 ⋅ 28分钟前 ⋅ 0

js修改img的src属性刷新图片时的图片缓存问题

问题:上传一张图片,通过js更新src属性刷新图片使其即时显示时, 当img的src当前的url与上次地址无变化时(只更改图片,名称不变,不同图片名称相同)图片不变化(仍显示原来的图片) 但通过...

HaierBrother ⋅ 29分钟前 ⋅ 0

Mysql

1.Jdbc Url 设置allowMultiQueries为true和false mysql的批量更新是要我们主动去设置的, 就是在数据库的连接url上设置一下,加上* &allowMultiQueries=true *即可。 参数名称 参数说明 缺省...

瑟青豆 ⋅ 32分钟前 ⋅ 0

mysql导出导入表结构与数据

当我们需要进行数据迁移时,mysql自带的mysqldump会是最好的方式。 1.导出某张表的结构和数据 首先,我们应当使用服务器,打开终端,连接到所需要导出的表所在的服务器上。执行命令: mysqld...

hengbao5 ⋅ 32分钟前 ⋅ 0

世界杯也走向“比拼”大数据的时代

《日本经济新闻》6月19日报道称,俄罗斯足球世界杯已于6月14日揭开战幕。作为第21次举办的足球世界杯,如何活用大数据有可能成为决定各支球队胜负的重要因素。从对阵球队的分析到战术建议,还...

加米谷大数据 ⋅ 33分钟前 ⋅ 0

金额转为千分制,金额转中文大写

金额转关为大写 /** 数字金额大写转换(可以处理整数,小数,负数) */ function digitUppercase(n){ if(!n) reutrn "" let fraction = ['角', '分']; let digit = [...

YXMBetter ⋅ 35分钟前 ⋅ 0

开发利器JRebel部署SpringBoot项目

不要以为年纪轻轻就跌倒了人生谷底,未来还有更大的下降空间等着你。 idea下载和安装JRebel 激活JRebel 访问https://my.jrebel.com/ 使用facebook或twitter登录 勾选 Build project automati...

郑龙飞 ⋅ 41分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部