element-ui date-picker 设置结束时间大于等于开始时间且开始时间小于等于结束时间

Part.1  问题

date-picker 组件在使用时,默认对时间是没有限制的,可以随便选择区间,官方文档添加了快捷选项,如:一周丶一月...

但是从用户体验方面出发,我们还是希望对时间进行有利的把控,如 我们的开始时间选定后,结束时间的可选区间应该大于或者等于开始时间,反之同理

Part.2  实现

HTML

<el-date-picker
        v-model="startTime"
        type="datetime"
        placeholder="开始日期"
        value-format="yyyy-MM-dd" format="yyyy-MM-dd"
        :picker-options="pickerOptionsStart"
        style="width:46%">
</el-date-picker>
<span> 至 </span>
<el-date-picker
        v-model="endTime"
        type="datetime"
        placeholder="结束日期"
        value-format="yyyy-MM-dd" format="yyyy-MM-dd"
        :picker-options="pickerOptionsEnd"
        style="width:46%">
</el-date-picker>

JS

export default {
    data() {
        return {
            startTime: ‘‘,
            endTime: ‘‘,

            pickerOptionsStart: {
                     disabledDate: time => {
                            if (this.endTime) {
                                 return time.getTime() > new Date(this.endTime).getTime()
                           }
                    }
             },
             pickerOptionsEnd: {
                      disabledDate: time => {
                            if (this.selectObj.startTime) {
                                    return time.getTime() < new Date(this.startTime).getTime() - 86400000
                            }
                       }
             },
        }
   }
}

Part.3  效果

原文地址:https://www.cnblogs.com/langxiyu/p/11076289.html

时间: 2024-10-30 18:20:19

element-ui date-picker 设置结束时间大于等于开始时间且开始时间小于等于结束时间的相关文章

element ui源码解析 -- Pagination篇( 副:列表页进入详情页再返回后,如何保持当前页码正确 )

之所以看Pagination源码,由于一个问题: 需求:从列表页进入详情页后再返回,需求方希望保持在当前的页码而不是重新定位到第一页 问题:按照element ui文档设置current-page后请求的数据正常,但pagination的页码显示却不正确,不管current-page值等于多少,永远显示第一页 解决方案: 1. 改 :current-page="currentPage" 为 :current-page.sync="currentPage" 2.查询接

asp.net使用My97 Date Picker时设置默认起始时间为n年之前的今天

可以使用My97 Date Picker组件来收集用户输入的日期值. 首先下载该组件:http://www.my97.net/dp/index.asp放到自己的项目中. 然后在项目里面引用js和css文件,例如: <script language="javascript" type="text/javascript" src="./My97DatePicker/WdatePicker.js"></script> <l

iOS开发UI篇—Date Picker和UITool Bar控件简单介绍

iOS开发UI篇—Date Picker和UITool Bar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何改成中文的? (1)查看当前系统是否为中文的,把模拟器改成是中文的 (2)属性,locale选择地区 如果默认显示不符合需求.时间有四种模式可以设置,在model中进行设置 时间可以自定义(custom). 设置最小时间和最大时间,超过就会自动回到最小时间. 最大的用途在于自定义键盘:弹出一个日期选

Element Ui 日期选择器 范围限制 + value-format

Element Ui 日期选择器 范围限制 一个日期范围 // el-date-picker <el-date-picker v-model="value" type="date" placeholder="选择日期" :picker-options="pickerOptions"> // </el-date-picker> // 选择 今天或以后的日期(不包含今天则去掉下面 - 8.64e7) pic

Vue框架Element UI教程(二)

原文:https://www.jianshu.com/p/1704b5935a8 [时间选择器] Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/element 前一篇已经安装好了Element UI环境,现在开始来实际操作框架提供的一些组件的运用了. 在准备好以下文章里面的内容

Date Picker控件:

Date Picker控件: 中文:日期/时间选取器 UIDatePicker有一个实例方法setDate:animated,以编程的方式选择日期. UIDatePicker有四种模式(model): Time(只选时间) Date(只选日期) Date and Time(选择时间和日期) Count Down timer (倒数计时器 ) 日期选取器不允许指定秒或时区 属性: locale:选择地区 custom:自定义时间 设置最小时间和最大时间,超过就会自动回到最小时间 // 添加一个时间

Date Picker和UITool Bar控件简单介绍

Date Picker和UITool Bar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何改成中文的? (1)查看当前系统是否为中文的,把模拟器改成是中文的 (2)属性,locale选择地区 如果默认显示不符合需求.时间有四种模式可以设置,在model中进行设置 时间可以自定义(custom). 设置最小时间和最大时间,超过就会自动回到最小时间. 最大的用途在于自定义键盘:弹出一个日期选择器出来,示例代码

2、CRM2011编程实战——设置窗体某一项的值为服务器时间

需求:设置窗体中某个控件的值为服务器时间. 解决方案:通过一个一般处理程序获取服务器时间,然后通过ajax形式获取到此服务器时间并赋值给界面控件. 1.新建一个一般处理程序GetSererTimeHandler.ashx, 代码如下: <%@ WebHandler Language="C#" Class="GetSererTimeHandler" %> using System; using System.Web; namespace IsWaterWe

php.ini中date.timezone设置分析

date.timezone设置php5默认date.timezone为utc,改为date.timezone = PRC即可解决时间相差八小时的问题,但我在php的官方文档中看了半天也没找到这个参数啊 虽然知道这个参数表示“中华人民共和国”的意思,但官方文档 中并没有这样的参数,只有Asia/Shanghai.Asia/Hong_Kong等这些参数啊,为何这里可以设置为RPC,哪位给指点指点,这个参数 究竟是在哪儿?官方文档中看来看去的确并没有此参数啊,不解. 一般都设成Asia/Shangha