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>

实现效果: 

elementUI 2个输入框 时间区间月份选择_第1张图片

elementUI 2个输入框 时间区间月份选择_第2张图片

elementUI 2个输入框 时间区间月份选择_第3张图片

elementUI 2个输入框 时间区间月份选择_第4张图片

 

你可能感兴趣的:(elementUI 2个输入框 时间区间月份选择)