Vue iview时间组件DatePicker，设置开始时间和结束时间约束

html模板代码：

<FormItem label=""><Row><Col span="11"><DatePicker type="date" :options="startTimeOptions" @on-change="startTimeChange" placeholder="开始时间"v-model="starttime"></DatePicker></Col><Col span="2" style="text-align: center">-</Col><Col span="11"><DatePicker type="date" :options="endTimeOptions" @on-change="endTimeChange" placeholder="结束时间"v-model="endtime"></DatePicker></Col></Row>
</FormItem>

js代码：

export default {data() {return {startTimeOptions: {}, //开始日期设置endTimeOptions: {}, //结束日期设置starttime: '', //开始日期modelendtime: '',//结束日期model}},methods: {startTimeChange: function(e) { //设置开始时间this.starttime = e;this.endTimeOptions = {disabledDate: date => {let startTime = this.starttime ? new Date(this.starttime).valueOf() : '';return date && (date.valueOf() < startTime);}}},endTimeChange: function(e) { //设置结束时间this.endtime = e;let endTime = this.endtime ? new Date(this.endtime).valueOf() - 1 * 24 * 60 * 60 * 1000 : '';this.startTimeOptions = {disabledDate(date) {return date && date.valueOf() > endTime;}}},}
}

Vue iview时间组件DatePicker，设置开始时间和结束时间约束相关推荐

laydate设置起始时间，laydate设置开始时间和结束时间
laydate设置开始时间后,结束时间不可小于已选择的开始时间 laydate设置结束时间后,开始时间不可小于已选择的结束时间 var startDate = laydate.render({elem ...
Element UI——日期时间选择器el-date-picker开始时间与结束时间约束解决方案
官方文档 https://element.eleme.cn/#/zh-CN/component/datetime-picker 问题分析 el-date-picker组件需要 :picker-opti ...
element 日期选择图标_element-ui日期组件DatePicker设置日期选择范围Picker Options
element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...
java取开始时间和结束时间_java获取指定开始时间与结束时间之间的所有日期
本文实例为大家分享了java获取指定开始时间与结束时间之间的所有日期的具体代码,供大家参考,具体内容如下 import java.text.SimpleDateFormat; import java. ...
使用vue+iview Form组件按enter键阻止页面刷新
如果我们在Form组件中嵌套使用Input组件的时候,会有一个小问题,如果我们在一个Form组件中只使用了一个Input组件,当该Input组件获取焦点的时候,我们按enter键,整个页面会刷新解决 ...
java获取当前日，当前月的开始时间和结束时间,当前季度的开始时间和结束时间
public static void main(String[] args) {SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd& ...
VUE常用UI组件插件及框架-vue前端UI框架收集
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
基于原生微信小程序的时间组件
作者的絮叨在开发原生微信小程序的时候,发现很少有基于原生微信小程序开发的相关插件或组件,不知道是不是我的孤陋寡闻,还是真的很少,暂且不管~下面我介绍一下我当时开发的一个时间组件,比较简陋,希望可以给 ...
PostgreSQL查询近多少年、多少周、根据日期查询这个周的开始时间和结束时间
一.查询连续年的SQL语句 1.查询连接近20年的sql语句 SELECT tab."year" || '年' as text,tab."year" as co ...

Vue iview时间组件DatePicker，设置开始时间和结束时间约束

Vue iview时间组件DatePicker，设置开始时间和结束时间约束相关推荐

最新文章

热门文章