zoukankan      html  css  js  c++  java
  • ElementUI日期选择器时间选择范围限制

      ElementUI是饿了么推出的一套基于vue2.x的一个ui框架。官方文档也很详细,这里做一个element-ui日期插件的补充,官方文档中使用picker-options属性来限制可选择的日期,这里举例子稍做补充。

    一、单个输入框的

    //组件代码
    <el-date-picker
           v-model="value1"
           type="date"
           placeholder="选择日期"
           :picker-options="pickerOptions">
    </el-date-picker>

      设置选择七天之前到今天的日期

    data(){
        return {
            pickerOptions:{
                disabledDate(time){
                    let _now = Date.now(),
                        seven = 7 * 24 * 60 * 60 * 1000,
                        sevenDays = _now - seven;
                    return time.getTime() > _now || time.getTime() < sevenDays;
                  //大于当前的禁止,小于7天前的禁止 } } } }

      这个return刚开始有点难理解,大致可以理解为time.getTime()就是里面的每个日期都会来遍及比较一遍,比当前时间大,为true,禁止;小于7天前的时间,为true,禁止。

    二、两个输入框

    <el-date-picker
           v-model="value1"
           type="date"
           placeholder="开始日期"
           :picker-options="pickerOptions0">
    </el-date-picker>
    <el-date-picker
           v-model="value2"
           type="date"
           placeholder="结束日期"
           :picker-options="pickerOptions1">
    </el-date-picker>

      限制结束日期不能大于开始日期

    data(){
        return {
             pickerOptions0: {
                disabledDate: (time) => {
                    if (this.value2 != "") {
                        return time.getTime() > Date.now() || time.getTime() > this.value2;
                    } else {
                        return time.getTime() > Date.now();
                    }
    
                }
            },
            pickerOptions1: {
                disabledDate: (time) => {
                    return time.getTime() < this.value1 || time.getTime() > Date.now();
                }
            }
        }
    }
  • 相关阅读:
    如何用js解网页中间内容的高度自适应
    常见Js获取高宽度的方法
    CSS3 转换 transform
    CSS3 过渡 transition
    CSS3 动画 animation
    当页面内容不够的时候,如何让footer一直固定底部显示
    如何用js判断是否为手机访问
    用css解决table文字溢出控制td显示字数
    jquery实现全选和反选功能
    JS中filter的用法
  • 原文地址:https://www.cnblogs.com/goloving/p/9122788.html
Copyright © 2011-2022 走看看