elementUI 2个输入框 时间区间月份选择
<!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个输入框 时间区间月份选择的更多相关文章
- My97设置开始、结束 时间区间及输入框不能输入只能选择的方法
时间区间开始: <input type="text" id = "first_time" name="first_time" valu ...
- pandas处理时间序列(2):DatetimeIndex、索引和选择、含有重复索引的时间序列、日期范围与频率和移位、时间区间和区间算术
一.时间序列基础 1. 时间戳索引DatetimeIndex 生成20个DatetimeIndex from datetime import datetime dates = pd.date_rang ...
- Element-UI饿了么时间组件控件按月份周日期,开始时间结束时间范围限制参数
在日常开发中,我们会遇到一些情况,在使用Element-UI 限制用户的日期时间范围的选择控制(例如:查询消息开始和结束时间,需要限制不能选择今天之后的时间). 看了网上的一些文档,零零散散.各式各样 ...
- Date Range Picker时间插件非常不错,主要体现在选择一个时间区间
地址:http://www.daterangepicker.com/ demo地址:http://tamble.github.io/jquery-ui-daterangepicker/#event a ...
- easyUI自带的时间插件日期选择、月份选择、时间选择的使用(转)
1.日期选择 只要将class设置成easyui-datebox就可以了,当然前提是已经应用了easyui的js <input type="text" class=" ...
- elementUI 日期时间选择器 只能选择当前及之后的时间
日期时间选择器 只能选择当前及之后的时间 <el-date-picker class="input-border-null" prefix-icon="el-ic ...
- JS------获取一个时间区间的所有天
1:获取一个时间区间的所有日期 function getDiffDate(start, end) { var startTime = getDate(start); var endTime = get ...
- java.util.Calendar获取时间区间问题
虽然java8的LocalDate已经出来,但是很多项目以及自己习惯上还是使用Date,这里还是简单介绍一下如何通过java.util.Calendar获取时间区间. 1 通过calendar.get ...
- SQL Server 判定时间是否在某个时间区间内
* FROM sys.objects WHERE name=N'uF_IsRange_Date' AND [type]='FN') DROP FUNCTION uF_IsRange_Date GO S ...
随机推荐
- USACO Slowing down
洛谷 P2982 [USACO10FEB]慢下来Slowing down 洛谷传送门 JDOJ 2684: USACO 2010 Feb Gold 3.Slowing down JDOJ传送门 Des ...
- Random Access Iterator 徐州网络赛(树形dp)
Random Access Iterator \[ Time Limit: 4000 ms \quad Memory Limit: 262144 kB \] 题意 给出伪代码,问按着伪代码在树上跑,能 ...
- SpringData JPA实现增删改查
application.properties配置 一.创建实体类并自动生成数据库表 二.dao层继承JpaRepository 三.controller中增加操作 结果: 删除操作: 修改操作:
- C++ new delete 一维数组 二维数组 三维数组
h----------------------------- #include "newandmalloc.h" #include <iostream> using n ...
- 【技术博客】移动端的点击事件与Sticky Hover问题
目录 移动端的点击事件与Sticky Hover问题 TL;DR 前言 问题描述 背景 实现方式 问题 关于移动端浏览器的点击事件 初次发现问题后各种解决尝试:从点击事件本身下手 cursor: po ...
- UE4命令行参数解析
转自:https://blog.csdn.net/u012999985/article/details/53544389 一 .命令行参数简述命令行参数是一连串的关键字字符串,当运行可执行文件时可以通 ...
- 关于央行数字货币DCEP的几个特点的思考(转)
近期,央行即将推出数字货币,无论在金融领域还是在资本市场,央行数字货币这一话题都被炒的很火热.央行研发的数字货币叫做DCEP(DC,DigitalCurrency,是数字货币:EP,Electroni ...
- cmder是一个增强型命令行工具,不仅可以使用windows下的所有命令,更爽的是可以使用linux的命令,shell命令。
cmder使用简介 Cmder is a software package created out of pure frustration over the absence of nice conso ...
- Python 3.X 练习集100题 01
有以下几个数字:1.2.3.4.5,能组成多少个互不相同且无重复数字的三位数?都是多少? 方法1: import itertools from functools import reduce lyst ...
- TreeMap源码分析1
二叉树他们都需要满足一个基本性质--即树中的任何节点的值大于它的左子节点,且小于它的右子节点.按照这个基本性质使得树的检索效率大大提高.我们知道在生成二叉树的过程是非常容易失衡的,最坏的情况就是一边倒 ...