elementUI 2个输入框 时间区间月份选择
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>
<script src="https://unpkg.com/vue/dist/vue.js">script>
<script src="https://unpkg.com/element-ui/lib/index.js">script>
<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>
实现效果: