elementUI 2个输入框 时间区间月份选择
程序员文章站
2022-10-08 22:32:29
实现效果: ......
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="reportapp">
<template>
<el-form>
<el-row>
<el-col :spna="12">
<el-form-item label="开始时间" size="mini">
<el-date-picker
v-model="startdate"
format="yyyy-mm"
type="month"
placeholder="选择月份"
:picker-options="pickeroptions1">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :spna="12">
<el-form-item label="结束时间" size="mini">
<el-date-picker
v-model="enddate"
format="yyyy-mm"
type="month"
placeholder="选择月份"
:picker-options="pickeroptions2">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
</div>
<!-- import vue before element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import javascript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var vm = new vue({
el: "#reportapp",
data: function () {
return {
startdate: '',
enddate: '',
pickeroptions1: {
disableddate(time) {
if (vm.enddate != null && vm.enddate != "") {
return time.gettime() > vm.enddate;
} else {
return false;
}
}
},
pickeroptions2: {
disableddate(time) {
if (vm.startdate != null && vm.startdate != "") {
return time.gettime() < vm.startdate;
} else {
return false;
}
}
}
}
}
})
</script>
</body>
</html>
实现效果: