<el-date-picker
type="datetime"
placeholder="选择上线日期"
:picker-options="startDatePicker"
v-model="addStartPageForm.onlineTime"
value-format="yyyy-MM-dd HH:mm:ss"
style="width: 100%;"
></el-date-picker> <el-date-picker
type="datetime"
placeholder="选择下线日期"
v-model="addStartPageForm.downlineTime"
:picker-options="endDatePicker"
value-format="yyyy-MM-dd HH:mm:ss"
@change="checkDateTime"
style="width: 100%;"
></el-date-picker>
data
startDatePicker: {},
endDatePicker: {},
method

 //设置开始时间 禁用昨天和以前时间
beginDate() {
return {
disabledDate(time) {
return new Date().getTime() - 60 * 60 * 24 * 1000 >= time.getTime();
},
};
},
//设置结束时间 禁用昨天和以前时间
processDate() {
const _this = this;
return {
disabledDate(time) {
if (_this.addStartPageForm.onlineTime) {
return (
new Date(_this.addStartPageForm.onlineTime).getTime() -
60 * 60 * 24 * 1000 >=
time.getTime()
);
}
},
};
},
//结束时间必须大于开始时间
checkDateTime(val) {
if (
this.addStartPageForm.onlineTime &&
this.addStartPageForm.downlineTime
) {
if (new Date(this.addStartPageForm.onlineTime) > new Date(val)) {
this.$message.error("结束时间必须大于开始时间");
this.addStartPageForm.downlineTime = "";
}
}
},
 created() {
this.startDatePicker = this.beginDate(); //设置开始时间
this.endDatePicker = this.processDate(); //设置结束时间
},

时间选择器 element的更多相关文章

  1. JavaScript 数字转汉字+element时间选择器快速选择

    window.CN = { : '一', : '二', : '三', : '四', : '五', : '六', : '七', : '八', : '九', : '零' } window.LEVEL = ...

  2. 微信小程序中利用时间选择器和js无计算实现定时器(将字符串或秒数转换成倒计时)

    转载注明出处 改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看 今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...

  3. 移动端lCalendar纯原生js日期时间选择器

    网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...

  4. ClockPicker – 时钟风格 Bootstrap 时间选择器

    ClockPicker 是国内前端开发者发布的一个时钟样式 Timepicker,可以用于 Bootstrap 和 jQuery.所有主流浏览器都支持,包括 IE9+,支持移动设备,能够在触摸屏设备很 ...

  5. Android课程---日历选择器和时间选择器

    package com.hanqi.test5; import android.os.Bundle; import android.support.annotation.IdRes; import a ...

  6. 分享一下我封装iOS自定义控件的体会,附上三个好用的控件Demo <时间选择器&多行输入框&日期选择器>

    前段时间有小伙伴问到我:"这样的控件该怎么做呢?",我感觉是个比较简单的控件,可能对于入行不久的同志思路没有很清晰吧.趁着最近工作不忙,就来这里分享一下我封装自定义控件的几点体会吧 ...

  7. bootstrap 时间选择器 datetime

    $("'#datetimepicker").datetimepicker({ format: "yyyy-mm-dd hh:ii:ss",//设置时间格式,默认 ...

  8. 移动端material风格日期时间选择器

    原文 好多时候在移动端需要一个的日期选择器,由于在应用上有可能应用各种框架库(Vue.js, React.js, zepto.js等):所以说一个无依赖的,这样易于上层进行封装.直接开门见山,先来张动 ...

  9. Android日期时间选择器实现以及自定义大小

    本文主要讲两个内容:1.如何将DatePicker和TimePicker放在一个dialog里面:2.改变他们的宽度: 问题1:其实现思路就是自定义一个Dialog,然后往里面同时放入DatePick ...

随机推荐

  1. Linux用C语言模拟‘ls‘命令

    原理 在linux下使用C语言,通过调用Linux系统的目录访问API来实现一个类似于ls命令功能的小程序,主要是可以练习程序对命令的解析和目录API函数的使用. 实现代码 #include < ...

  2. 用 Python 可以实现侧脸转正脸?我也要试一下!

    作者 | 李秋键 责编 | Carol 封图 | CSDN 下载自视觉中国 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例 ...

  3. javascript数组笔记

    1.数组 2.利用new创建数组 var arr= new Array(); 3.利用数组字面量创建数组 var 数组名=[]; 4.数组里面的数据叫 5.数组的索引(数组下标从0开始) 6.遍历数组 ...

  4. Unity目录结构设置

    摄像机 Main Camera 跟随主角移动,不看 UI 剧情摄像机 当进入剧情时,可以关闭 main camera,启用剧情摄像机,不看 UI UI 摄像机 看 UI Unity编辑器常用的sett ...

  5. 使用Luhn算法实现信用卡号验证

    问题描述: 2:信用卡号的验证 [信用卡号的验证] 当你输入信用卡号码的时候,有没有担心输错了而造成损失呢?其实可以不必这么 担心,因为并不是一个随便的信用卡号码都是合法的,它必须通过 Luhn 算法 ...

  6. Dubbo整合Springboot框架

    本文使用的是alibaba的Dubbo. Dubbo整合Springboot可以分为四步: 第一步:首先需要了解Dubbo官方给的建议,至少有三个工程: 接口工程:主要存实体bean和业务接口 服务提 ...

  7. C#LeetCode刷题之#707-设计链表(Design Linked List)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4118 访问. 设计链表的实现.您可以选择使用单链表或双链表.单链 ...

  8. Vuex mapState的基本使用

    mapState把Store中的state映射到组件中的计算属性 Store文件 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) ...

  9. Android SharedPreferences存储详解

    什么是SharedPreferences存储 一种轻量级的数据保存方式 类似于我们常用的ini文件,用来保存应用程序的一些属性设置.较简单的参数设置. 保存现场:保存用户所作的修改或者自定义参数设定, ...

  10. Spring @Transactional事物配置无效原因

    spring @transaction不起作用,Spring事物注意事项 1. 在需要事务管理的地方加@Transactional 注解.@Transactional 注解可以被应用于接口定义和接口方 ...