ElementUI的DatePicker(日期选择器)限定范围的玩法
时间:2022-07-23
本文章向大家介绍ElementUI的DatePicker(日期选择器)限定范围的玩法,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.ElementUI的DatePicker(日期选择器)时间范围只能在一个月
效果
222
代码
<template>
<div class="page">
<el-date-picker
v-model="date"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
<script>
export default {
name: 'TestPage',
data () {
return {
date: '',
curDate: '',
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.curDate = minDate.getTime()
if (maxDate) {
this.curDate = ''
}
},
disabledDate: (time) => {
if (this.curDate) {
const one = 30 * 24 * 3600 * 1000
const minTime = this.curDate - one
const maxTime = this.curDate + one
return time.getTime() < minTime || time.getTime() > maxTime
}
}
}
}
},
mounted () {
},
methods: {
}
}
</script>
<style>
.page {
padding-top: 200px;
box-sizing: border-box;
}
</style>
2.ElementUI的DatePicker(日期选择器)只能选择当前时间前一个月的范围
示例
image
代码
<template>
<div class="page">
<el-date-picker
v-model="date"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
<script>
export default {
name: 'TestPage',
data () {
return {
date: '',
pickerOptions: {
disabledDate(time) {
let curDate = (new Date()).getTime();
let three = 30 * 24 * 3600 * 1000;
let threeMonths = curDate - three;
return time.getTime() > Date.now() || time.getTime() < threeMonths;;
}
}
}
},
mounted () {
},
methods: {
}
}
</script>
<style>
.page {
padding-top: 200px;
box-sizing: border-box;
}
</style>
- javascript:FF/Chrome 与 IE 动态加载元素的区别
- 腾讯云发布企业级微服务中间件TSF,助企业构建亿级互联网应用架构
- java学习:字符串比较“==”与“equals”的差异及与c#的区别
- 纯C语言程序员写的编程新手入门基础小游戏之最炫酷推箱子
- Oracle BIEE (Business Intelligence) 11g 11.1.1.6.0 学习(2)RPD资料档案库创建
- Oracle BIEE (Business Intelligence) 11g 11.1.1.6.0 学习(3)创建一个简单的分析
- 请查收!这里有一封信鸽传给您的信
- Oracle BIEE (Business Intelligence) 11g 11.1.1.6.0 学习(4)创建多维钻取分析
- silverlight:RadMaskedTextBox设置MaskType="Numeric"及Mask="n"时的一个bug
- 微信里面最神秘的功能,你知道吗?
- 以大数据之名,变身!——In big data we trust
- 90%家长都不知道关于少儿编程的这些疑题!
- 常用SQL语句和语法汇总
- Python学习笔记1——斐波那契数列
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 微信开发系列之六 - 使用微信OAuth2 API读取微信用户信息,显示在SAP UI5里
- 微信开发系列之五 - 将SAP UI5应用嵌入到微信中
- 微信开发系列之四 - 将SAP C4C的数据更改通知发送到微信公众号上
- 微信开发系列之三 - 在微信公众号里发起SAP C4C Account的创建
- 微信开发系列之二 - 在微信公众号里开发一个自动应答的图灵机器人
- 微信开发系列之一 - 微信公众号开发的开发环境搭建
- SAP Commerce开发之如何找到某个页面对应的JSP实现页面
- 如何用代码读取SAP CRM的Categorization Schema
- 如何使用代码创建SAP CRM Service Request subject
- 微信开发系列之八 - 微信公众号的地图集成
- vivo 悟空活动中台 - 栅格布局方案
- 使用literal或者绑定变量执行SAP HANA SQL语句
- dotnet OpenXML 如何判断是形状还是文本
- dotnet 执行 docker 容器 error MSB4018 CreateAppHost 任务意外失败可能原因
- dotnet 定制 ILogger 实现