<!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>

实现效果:

elementUI 2个输入框 时间区间月份选择的更多相关文章

  1. My97设置开始、结束 时间区间及输入框不能输入只能选择的方法

    时间区间开始: <input type="text" id = "first_time" name="first_time" valu ...

  2. pandas处理时间序列（2）：DatetimeIndex、索引和选择、含有重复索引的时间序列、日期范围与频率和移位、时间区间和区间算术

    一.时间序列基础 1. 时间戳索引DatetimeIndex 生成20个DatetimeIndex from datetime import datetime dates = pd.date_rang ...

  3. Element-UI饿了么时间组件控件按月份周日期，开始时间结束时间范围限制参数

    在日常开发中,我们会遇到一些情况,在使用Element-UI 限制用户的日期时间范围的选择控制(例如:查询消息开始和结束时间,需要限制不能选择今天之后的时间). 看了网上的一些文档,零零散散.各式各样 ...

  4. Date Range Picker时间插件非常不错，主要体现在选择一个时间区间

    地址:http://www.daterangepicker.com/ demo地址:http://tamble.github.io/jquery-ui-daterangepicker/#event a ...

  5. easyUI自带的时间插件日期选择、月份选择、时间选择的使用（转）

    1.日期选择 只要将class设置成easyui-datebox就可以了,当然前提是已经应用了easyui的js <input type="text" class=" ...

  6. elementUI 日期时间选择器 只能选择当前及之后的时间

    日期时间选择器  只能选择当前及之后的时间 <el-date-picker class="input-border-null" prefix-icon="el-ic ...

  7. JS------获取一个时间区间的所有天

    1:获取一个时间区间的所有日期 function getDiffDate(start, end) { var startTime = getDate(start); var endTime = get ...

  8. java.util.Calendar获取时间区间问题

    虽然java8的LocalDate已经出来,但是很多项目以及自己习惯上还是使用Date,这里还是简单介绍一下如何通过java.util.Calendar获取时间区间. 1 通过calendar.get ...

  9. SQL Server 判定时间是否在某个时间区间内

    * FROM sys.objects WHERE name=N'uF_IsRange_Date' AND [type]='FN') DROP FUNCTION uF_IsRange_Date GO S ...

随机推荐

  1. Java多线程编程核心技术-第5章-定时器 Timer-读书笔记

    第 5 章 定时器 Timer 定时 / 计划功能在移动开发领域使用较多,比如 Android 技术.定时计划任务功能在 Java 中主要使用的就是 Timer 对象,他在内部使用多线程的方式进行处理 ...

  2. 缓存中，2个注解：@cacheable 与 @cacheput 的区别

    @cacheable:只会执行一次,当标记在一个方法上时表示该方法是支持缓存的,Spring会在其被调用后将其返回值缓存起来,以保证下次利用同样的参数来执行该方法时可以直接从缓存中获取结果. @cac ...

  3. mybatis框架，使用foreach实现复杂结果的查询--循环List集合方式

    需求,根据用户角色列表  查询用户列表信息 之前我们传入的参数是Array,一个数组的形式,现在我们传入的是一个List集合,其他条件没有变化. /** * 需求:传入指定的用户角色,用户角色有1-n ...

  4. Pandas | 10 排序

    Pandas有两种排序方式,它们分别是 - 按标签 按实际值 import pandas as pd import numpy as np df=pd.DataFrame(np.random.rand ...

  5. QHBoxLayout 、QFormLayout 遍历子部件，查找QLineEdit控件

    布局如下: QLineEdit * edit1 = new QLineEdit; QLineEdit * edit2 = new QLineEdit; QLineEdit * edit3 = new ...

  6. [Gamma]Scrum Meeting#9

    github 本次会议项目由PM召开,时间为6月4日晚上10点30分 时长15分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写博客,组织例会 撰写博客,组织例会 swoip 前端显示屏幕,翻译坐 ...

  7. UE4命令行参数解析

    转自:https://blog.csdn.net/u012999985/article/details/53544389 一 .命令行参数简述命令行参数是一连串的关键字字符串,当运行可执行文件时可以通 ...

  8. VS2019调试 asp.net core 2.2 出现《ANCM In-Process Handler Load Failure 发布后启动错误处理》处理

      从 google 出来的 github 上  AspNetCore issues 和 stackoverflow 搜到的,百度 博客园搜到的,CSDN 搜到的,统统设置了,不管用.   从这些问题 ...

  9. Python【每日一问】24

    问: [基础题1]: 请解释一下 if __name__ == '__main__' :的作用 [基础题2]:请输入星期几的第一个字母来判断一下是星期几,如果第一个字母一样,则继续判断第二个字母. P ...

  10. QuantLib 金融计算——收益率曲线之构建曲线（5）

    目录 QuantLib 金融计算--收益率曲线之构建曲线(5) 概述 Nelson-Siegel 模型家族的成员 Nelson-Siegel 模型 Svensson 模型 修正 Svensson 模型 ...