vue+elementUI封装的时间插件（有起始时间不能大于结束时间的验证）
2024-10-19 06:20:05
vue+elementUI封装的时间插件（有起始时间不能大于结束时间的验证）：
html:
<el-form-item label="活动时间" required>
<el-col :xs="24" :sm="11" :md="7" :lg="5" class="startTime">
<el-form-item prop="start_time">
<el-date-picker
type="datetime"
placeholder="起始时间"
v-model="activityInfo.start_time"
:picker-options="pickerBeginDateBefore"
style="width: 100%;"
></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" style="width:20px;text-align:center">至</el-col>
<el-col :xs="22" :sm="11" :md="7" :lg="5" class="endTime">
<el-form-item prop="end_time">
<el-date-picker
type="datetime"
placeholder="结束时间"
v-model="activityInfo.end_time"
:picker-options="pickerBeginDateAfter"
:disabled="activityInfo.is_long"
style="width: 100%;"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="8" :lg="5" class="longTime">
<el-form-item label-width="7px" prop="is_long">
<el-checkbox v-model="activityInfo.is_long" :true-label="1" :false-label="0">长期</el-checkbox>
</el-form-item>
</el-col>
</el-form-item>
js（在data的定义中）：
pickerBeginDateBefore:{
disabledDate: (time) => {
let beginDateVal =new Date( this.activityInfo.end_time).getTime();
if (beginDateVal) {
return (time.getTime() > beginDateVal) ||(time.getTime() < Date.now() - 8.64e7);
}else{
return time.getTime() < Date.now() - 8.64e7
}
}
},
pickerBeginDateAfter:{
disabledDate: (time) => {
let beginDateVal = new Date(this.activityInfo.start_time).getTime();
if (beginDateVal) {
return time.getTime() < (beginDateVal-24*60*60*1000);
}
}
},
输入验证：
//在rules中:
start_time:[
{ required: true, message: '请选择起始时间', trigger: 'change' }
],
end_time:[
{ validator: checkEndTime, trigger: 'change' }
/* { required: true, message: '请选择结束时间', trigger: 'change' }*/
], //自定义的验证函数：
checkEndTime=function(rule, value, callback){
/*var isLongTime=$($(".longTime").find(".el-checkbox__input")[0]).hasClass("is-checked")
if(!value && !isLongTime) {
return callback(new Error('请选择结束时间'));
}*/
if(!activity_edit.activityInfo.is_long && !value){
return callback(new Error('请选择结束时间'));
}
callback();
};
值的类型转换（在watch中）：
"activityInfo.start_time":{
handler: function (val, oldVal) {
var _this=this;
if(val){
_this.activityInfo.start_time=_this.getDayTime(_this.activityInfo.start_time,true);
}
},
deep: true
},
"activityInfo.end_time":{
handler: function (val, oldVal) {
var _this=this;
if(val){
_this.activityInfo.end_time=_this.getDayTime(_this.activityInfo.end_time,true);
}
},
deep: true
},
如果日期type="daterange"，不可选择日期作如下处理
<el-date-picker v-model="value1" type="daterange"
:picker-options="pickerOptions">
</el-date-picker> data() {
return {
value: '',
pickerOptions2: {
disabledDate: (time) => {
return time.getTime() > new Date(2017, 11, 30) || time.getTime() < new Date(2017, 11, 11);//注意是||不是&&
}
}
};
} //如果是不能选择今日
data() {
return {
value: '',
pickerOptions2: {
disabledDate: (time) => {
return time.getTime() > new Date();
}
}
};
}
最新文章
- [Head First设计模式]生活中学设计模式——迭代器模式
- 【转】Python3.x和Python2.x的区别
- matlab里.*和*的区别
- oracle限制用户连接数
- JavaScript 获取当前时间戳的代码
- BindingFlags说明
- 输入一个整数n，求从1到n这n个整数的十进制表示中1出现的次数
- C语言中如何使用宏
- 学习Linux（一）环境搭建
- 日历插件(beta)
- 使用xUnit为.net core程序进行单元测试(上)
- 利用ir.sequence自动生成序列号
- parallel Stream 学习
- Android平台如何获得屏幕尺寸？
- BZ4326 运输计划
- awk练习笔记
- 发布.NET Core到IIS
- 在（Raspberry Pi）树莓派上安装NodeJS
- Centos编译Hadoop 2.x 源码
- 基于Spring 4.0 的 Web Socket 聊天室/游戏服务端简单架构