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. LInux下Posix的传统线程示例

    简介 Linux线程是需要连接pthreat库,线程的使用比进程更灵活,需要注意的是线程间的互斥,或者说是资源共享问题. C++11之后,C++标准库也引入了线程,并且使用非常方便,以后再介绍,这里先 ...

  2. C#设计模式之2-抽象工厂模式

    抽象工厂模式(Abstract Factory Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/391 ...

  3. 【高阶版】Python词典

    使用dict.fromkeys()创建词典的一个坑 创建词典有三种方法,第一是直接赋值,d = {1:2, 2:3}:第二个是,通过构造方法,d = dict([(1, 2), (2, 3)]),第三 ...

  4. python对端口进行扫描

    使用cocket模块配合多线程对端口进行扫描,后续功能正在思考ing. import socket from multiprocessing.dummy import Pool as ThreadPo ...

  5. Jmeter 常用函数(6)- 详解 __P

    如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.html 作用 和 __property 作用一样,不 ...

  6. js的事件循环和任务队列

    js 异步.栈.事件循环.任务队列 在开发中经常遇到js的异步问题,为了方便理解,记录下来,随时回顾. 以下的所有代码都是在浏览器环境下运行 在浏览器中js的运行是依赖浏览器js引擎来解析的,并且是在 ...

  7. 在 Linux 中查找和删除重复文件

    原文链接:https://www.linuxprobe.com/linux-FSlint.html FSlint同时具有GUI和CLI模式.因此,对于新手来说,这是一个用户友好的工具.FSlint不仅 ...

  8. 微众银行FATE联邦学习框架

    参考:https://github.com/webankfintech/fate https://www.fedai.org/#/ 一.Docker Standalone 安装 FATE $ sh b ...

  9. OpenGL学习日志(2020.4之前)

    咳咳,原本这个日志是本机上随便写的一些记录,也没怎么注意可读性和格式,有用信息密度很小,所以实用价值并不大.暂时由于不可抗因素得先鸽一段落了... 后续的日志会升格为模块化的学习记录,(应该)将会有很 ...

  10. flutter 制作一个用户登录页面

    flutter 制作一个用户登录页面 用户登录效果图如下: 登录页面如下: import 'package:flutter/material.dart'; import 'package:flutte ...