element 日期控件限制开始日期和结束日期

基于element ui中的时间日期控件的开始日期和结束日期的限制用picker-options属性，当前日期时间器特有的选项。

代码如下：

<el-form-item

label="开始日期"

label-width="90px"

prop="startDate">

<el-date-picker

v-model="statDate"

:picker-options="startDateOptions"

type="date"

clearable

style="width:140px"

value-format="yyyy-MM-dd"

placeholder="开始日期"/>

</el-form-item>

<el-form-item

label="结束日期"

label-width="90px"

prop="endDate">

<el-date-picker

v-model="endDate"

:picker-options="EndDateOptions"

type="date"

clearable

style="width:140px"

value-format="yyyy-MM-dd"

placeholder="结束日期"/>

</el-form-item>

export default{

data() {

return {

// 时间开始测试

startDateOptions: {

// console.log(time)

disabledDate: (time) => {

if (!Object.is(this.endDate, '')) {

return time.getTime() > Date.now(this.endDate) - 8.64e7 || time.getTime() > new Date(this.endDate).getTime()// 如果当天可选，就不用减8.64e7

} else {

return time.getTime() > Date.now(this.endDate) - 8.64e7

}

// 时间结束测试

EndDateOptions: {

disabledDate: (time) => {

return time.getTime() < new Date(this.statDate).getTime() || time.getTime() > Date.now() || time.getTime() > Date.now(this.statDate) - 8.64e7 // 如果当天可选，就不用减8.64e7

}

statDate: '',

// 结束日期

endDate: '',

// 开始日期至结束日期

}

使用了es6的新特性中箭头函数，箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，省略掉了{ ... }和return。还有一种可以包含多条语句，这时候就不能省略{ ... }和return

转载于:https://www.cnblogs.com/yearshar/p/11555157.html

element 日期控件限制开始日期和结束日期相关推荐

html页面时间段开始结束,使用layui日期控件laydate对开始和结束时间进行联动控制的方法...
1.在页面先引入laydate.js文件 2.html页面控件如下: 3.html页面js代码如下: //年月选择器 laydate.render({ elem: '#begin_time' ,typ ...
帆软日期控件变灰_FineReport-JS脚本常见日期使用整理
var mydate = new Date(); //创建日期对象,返回值为当前日期(包涵时分秒) mydate.setMonth(mydate.getMonth()-1); //设置日期对象中的&q ...
elementUI日期控件el-date-picker显示的月份、日期由英文改为中文
问题现象:日期控件显示的英文出现英文的原因:项目在main.js文件里设置的默认语言为英文. 改为中文的方法: Vue.use(ElementUI, { zhLocale })
python选择日期控件_【Python】python 日期操作
datetime模块定义了下面这几个类: datetime.date:表示日期的类.常用的属性有year, month, day.datetime.time:表示时间的类.常用的属性有hour, mi ...
elementUI日期控件el-date-picker显示的月份、日期变成英文了
从elementui上复制下来组件,发现日期变成英文了出现英文的原因:项目在main.js文件里设置的默认语言为英文. 解决:在main.js中引入中文方法即可 //在main.js中引入中文方法即 ...
ASP.NET中 Calendar(日期控件)的使用
ylbtech-ASP.NET-Control-Basic:Calendar(日期控件)的使用 ASP.NET中 Calendar(日期控件)的使用. 1.A,运行效果返回顶部 Calendar(日期 ...
python 日历控件_python selenium 处理时间日期控件（十六）
测试过程中经常遇到时间控件,需要我们来选择日期,一般处理时间控件通过层级定位来操作或者通过调用js来实现. 1.首先我们看一下如何通过层级定位来操作时间控件. 通过示例图可以看到,日期控件是无法输入日 ...
Android日期控件
(请先认真读一下前两段,谢谢) 最近做了一个电商的Android原生项目,其中有一个酒店预订的功能,要实现一个日期控件,基本就是入住时间,离店时间,日期控件需要连续展示一年或者几年的按月份显示的连续视 ...
java swing 获当前日期_Java图形界面Swing下日期控件
码农公社 210.net.cn 210是何含义?10月24日是程序员节,1024 =210.210既 210 之意. Java自学-图形界面日期控件两种Swing下的日期控件 DatePick ...

element 日期控件限制开始日期和结束日期

element 日期控件限制开始日期和结束日期相关推荐

最新文章

热门文章

element 日期控件 限制开始日期和结束日期

element 日期控件 限制开始日期和结束日期相关推荐

最新文章

热门文章

element 日期控件限制开始日期和结束日期

element 日期控件限制开始日期和结束日期相关推荐