vue element 时间校验 结束时间不能小于开始时间
For example举例:<el-col :span="12"><el-form-item label="开始日期:" prop="startTime" class="input_search"><el-date-picker size="small" placeholder="请选择" v-model="form.startTime"type="date" :pi
·
For example1举例:
<el-col :span="12">
<el-form-item label="开始日期:" prop="startTime" class="input_search">
<el-date-picker size="small" placeholder="请选择" v-model="form.startTime"
type="date" :picker-options="StartPickerDisabled" format="yyyy-MM-dd" >
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="结束日期:" prop="endtTime" class="input_search">
<el-date-picker size="small" placeholder="请选择" :picker-
options="EndPickerDisabled" v-model="form.endtTime" type="date"
format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col>
data(){
return{
form:{
startTime:'',
endtTime:'',
}
StartPickerDisabled: {
//开始时间限制
disabledDate: time => {
let beginVal = this.form.endtTime;
if (beginVal) {
return time.getTime() > beginVal;
}
}
},
EndPickerDisabled: {
//结束时间限制
disabledDate: time => {
let beginVal = this.form.startTime;
if (beginVal) {
return time.getTime() < beginVal;
}
}
},
}
}
For example2举例:
<el-col :span="12">
<el-form-item label="日期:">
<el-date-picker
v-model="selectedTime"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-col>
selectedTime: [],
searchClick() {
this.params = {
startTime: this.selectedTime ? this.selectedTime[0] : '',
endTime: this.selectedTime ? this.selectedTime[1] : ''
}
},
效果图
一般情况这样就可以了,但是也时会出现问题----------------如果给后端传的时间格式为yyyy-MM-dd format那样写已经没有作用了
1.首先下载个插件 npm install moment --save # npm
Moment.js 2.24.0
JavaScript 日期处理类库------真心不错哦
2. 引入 import moment from "moment";
3.传参时用
endtTime: this.form.endtTime? moment(this.form.endtTime).format("YYYY-MM-DD") : "",
startEnd: this.form.startEnd? moment(this.form.startEnd).format("YYYY-MM-DD") : "",
完美得解决时间得坑
更多推荐
已为社区贡献3条内容
所有评论(0)