时间选择器 element
- <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的更多相关文章
- JavaScript 数字转汉字+element时间选择器快速选择
window.CN = { : '一', : '二', : '三', : '四', : '五', : '六', : '七', : '八', : '九', : '零' } window.LEVEL = ...
- 微信小程序中利用时间选择器和js无计算实现定时器(将字符串或秒数转换成倒计时)
转载注明出处 改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看 今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...
- 移动端lCalendar纯原生js日期时间选择器
网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...
- ClockPicker – 时钟风格 Bootstrap 时间选择器
ClockPicker 是国内前端开发者发布的一个时钟样式 Timepicker,可以用于 Bootstrap 和 jQuery.所有主流浏览器都支持,包括 IE9+,支持移动设备,能够在触摸屏设备很 ...
- Android课程---日历选择器和时间选择器
package com.hanqi.test5; import android.os.Bundle; import android.support.annotation.IdRes; import a ...
- 分享一下我封装iOS自定义控件的体会,附上三个好用的控件Demo <时间选择器&多行输入框&日期选择器>
前段时间有小伙伴问到我:"这样的控件该怎么做呢?",我感觉是个比较简单的控件,可能对于入行不久的同志思路没有很清晰吧.趁着最近工作不忙,就来这里分享一下我封装自定义控件的几点体会吧 ...
- bootstrap 时间选择器 datetime
$("'#datetimepicker").datetimepicker({ format: "yyyy-mm-dd hh:ii:ss",//设置时间格式,默认 ...
- 移动端material风格日期时间选择器
原文 好多时候在移动端需要一个的日期选择器,由于在应用上有可能应用各种框架库(Vue.js, React.js, zepto.js等):所以说一个无依赖的,这样易于上层进行封装.直接开门见山,先来张动 ...
- Android日期时间选择器实现以及自定义大小
本文主要讲两个内容:1.如何将DatePicker和TimePicker放在一个dialog里面:2.改变他们的宽度: 问题1:其实现思路就是自定义一个Dialog,然后往里面同时放入DatePick ...
随机推荐
- 【源码】Python3使用Requests抓取和检测电光代理API,并查询ip代理是否成功
电光代理成立后,做一篇笔记,记录我使用Requests抓取和测试电光代理的方法 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做 ...
- 常哥带你认识NoSQL和Redis的强大
各位朋友,这篇文章是针对Redis快速了解的内容,为了学好Redis在这里首先跟大家聊聊NoSQL相关内容,有了概念和方向后,我们再学习Redis大家会感觉得心应手. [公众号dotNet工控上位机: ...
- java SFTP工具类
需要导入jsch-0.1.52.jar import java.io.File; import java.io.FileInputStream; import java.io.FileOutputSt ...
- 数据结构C++使用邻接表实现图
定义邻接表存储的图类.[实验要求] (1)创建一个邻接表存储的图:(2)返回图中指定边的权值:(3)插入操作:向图中插入一个顶点,插入一条边:(4)删除操作:从图中删除一个顶点,删除一条边:(5)图的 ...
- Vuex mapAction的基本使用
mapAction-store中的异步方法 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new ...
- three.js 制作机房(下)
这一篇书接上文,说一说剩下的一些模块. 1. 机箱存储占用比率 机箱存储占用比其实很简单,就是在机箱上新加一个组即可,然后根据比率值来设置颜色,这个颜色我们去HSL(0.4,0.8,0.5) ~ HS ...
- GUAVA-cache实现
GUAVA Cache Guava Cache与ConcurrentMap很相似基于分段锁及线程安全,但也不完全一样.最基本的区别是ConcurrentMap会一直保存所有添加的元素,直到显式地移除 ...
- 初识ABP vNext(3):vue对接ABP基本思路
目录 前言 开始 登录 权限 本地化 创建项目 ABP vue-element-admin 最后 前言 上一篇介绍了ABP的启动模板以及AbpHelper工具的基本使用,这一篇将进入项目实战部分.因为 ...
- idea工程在maven projects中显示灰色的解决办法
原文链接:https://blog.csdn.net/qq_30507287/article/details/83515461 在Mac上使用idea进行开发的过程中,一般在MavenProject中 ...
- Jmeter 常用函数(21)- 详解 __char
如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.htm 作用 根据给定的字符值转换成 Unicode ...