1. <el-date-picker
  2. type="datetime"
  3. placeholder="选择上线日期"
  4. :picker-options="startDatePicker"
  5. v-model="addStartPageForm.onlineTime"
  6. value-format="yyyy-MM-dd HH:mm:ss"
  7. style="width: 100%;"
  8. ></el-date-picker>
  9.  
  10. <el-date-picker
  11. type="datetime"
  12. placeholder="选择下线日期"
  13. v-model="addStartPageForm.downlineTime"
  14. :picker-options="endDatePicker"
  15. value-format="yyyy-MM-dd HH:mm:ss"
  16. @change="checkDateTime"
  17. style="width: 100%;"
  18. ></el-date-picker>
  1. data
    startDatePicker: {},
  2. endDatePicker: {},
  1. method
  2.  
  3. //设置开始时间 禁用昨天和以前时间
  4. beginDate() {
  5. return {
  6. disabledDate(time) {
  7. return new Date().getTime() - 60 * 60 * 24 * 1000 >= time.getTime();
  8. },
  9. };
  10. },
  11. //设置结束时间 禁用昨天和以前时间
  12. processDate() {
  13. const _this = this;
  14. return {
  15. disabledDate(time) {
  16. if (_this.addStartPageForm.onlineTime) {
  17. return (
  18. new Date(_this.addStartPageForm.onlineTime).getTime() -
  19. 60 * 60 * 24 * 1000 >=
  20. time.getTime()
  21. );
  22. }
  23. },
  24. };
  25. },
  26. //结束时间必须大于开始时间
  27. checkDateTime(val) {
  28. if (
  29. this.addStartPageForm.onlineTime &&
  30. this.addStartPageForm.downlineTime
  31. ) {
  32. if (new Date(this.addStartPageForm.onlineTime) > new Date(val)) {
  33. this.$message.error("结束时间必须大于开始时间");
  34. this.addStartPageForm.downlineTime = "";
  35. }
  36. }
  37. },
  1. created() {
  2. this.startDatePicker = this.beginDate(); //设置开始时间
  3. this.endDatePicker = this.processDate(); //设置结束时间
  4. },

时间选择器 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. 【源码】Python3使用Requests抓取和检测电光代理API,并查询ip代理是否成功

    电光代理成立后,做一篇笔记,记录我使用Requests抓取和测试电光代理的方法 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做 ...

  2. 常哥带你认识NoSQL和Redis的强大

    各位朋友,这篇文章是针对Redis快速了解的内容,为了学好Redis在这里首先跟大家聊聊NoSQL相关内容,有了概念和方向后,我们再学习Redis大家会感觉得心应手. [公众号dotNet工控上位机: ...

  3. java SFTP工具类

    需要导入jsch-0.1.52.jar import java.io.File; import java.io.FileInputStream; import java.io.FileOutputSt ...

  4. 数据结构C++使用邻接表实现图

    定义邻接表存储的图类.[实验要求] (1)创建一个邻接表存储的图:(2)返回图中指定边的权值:(3)插入操作:向图中插入一个顶点,插入一条边:(4)删除操作:从图中删除一个顶点,删除一条边:(5)图的 ...

  5. Vuex mapAction的基本使用

    mapAction-store中的异步方法 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new ...

  6. three.js 制作机房(下)

    这一篇书接上文,说一说剩下的一些模块. 1. 机箱存储占用比率 机箱存储占用比其实很简单,就是在机箱上新加一个组即可,然后根据比率值来设置颜色,这个颜色我们去HSL(0.4,0.8,0.5) ~ HS ...

  7. GUAVA-cache实现

    GUAVA  Cache Guava Cache与ConcurrentMap很相似基于分段锁及线程安全,但也不完全一样.最基本的区别是ConcurrentMap会一直保存所有添加的元素,直到显式地移除 ...

  8. 初识ABP vNext(3):vue对接ABP基本思路

    目录 前言 开始 登录 权限 本地化 创建项目 ABP vue-element-admin 最后 前言 上一篇介绍了ABP的启动模板以及AbpHelper工具的基本使用,这一篇将进入项目实战部分.因为 ...

  9. idea工程在maven projects中显示灰色的解决办法

    原文链接:https://blog.csdn.net/qq_30507287/article/details/83515461 在Mac上使用idea进行开发的过程中,一般在MavenProject中 ...

  10. Jmeter 常用函数(21)- 详解 __char

    如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.htm 作用 根据给定的字符值转换成 Unicode ...