专栏首页技术综合ElementUI的DatePicker(日期选择器)限定范围的玩法

ElementUI的DatePicker(日期选择器)限定范围的玩法

1.ElementUI的DatePicker(日期选择器)时间范围只能在一个月

效果

222

代码

<template>
  <div class="page">
      <el-date-picker
        v-model="date"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>
  </div>
</template>
<script>
export default {
  name: 'TestPage',
  data () {
    return {
      date: '',
      curDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.curDate = minDate.getTime()
          if (maxDate) {
            this.curDate = ''
          }
        },
        disabledDate: (time) => {
          if (this.curDate) {
            const one = 30 * 24 * 3600 * 1000
            const minTime = this.curDate - one
            const maxTime = this.curDate + one
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      }
    }
  },
  mounted () {
  },
  methods: {
  }
}
</script>
<style>
  .page {
    padding-top: 200px;
    box-sizing: border-box;
  }
</style>

2.ElementUI的DatePicker(日期选择器)只能选择当前时间前一个月的范围

示例

image

代码

<template>
  <div class="page">
      <el-date-picker
        v-model="date"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>
  </div>
</template>
<script>
export default {
  name: 'TestPage',
  data () {
    return {
      date: '',
      pickerOptions: {
        disabledDate(time) {
          let curDate = (new Date()).getTime();
          let three = 30 * 24 * 3600 * 1000;
          let threeMonths = curDate - three;
          return time.getTime() > Date.now() || time.getTime() < threeMonths;;
        }
      }
    }
  },
  mounted () {
  },
  methods: {
  }
}
</script>
<style>
  .page {
    padding-top: 200px;
    box-sizing: border-box;
  }
</style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • nginx部署react项目

    build注意要配置webpack的webpack.config.prod.js文件,生产环境的配置(我是使用的less,所以加了个less的loader)

    治电小白菜
  • 微信带备注群发真好玩!

    JS操作个人微信的一个库 github:https://github.com/Chatie/wechaty

    治电小白菜
  • socket.io Emit cheatsheet

    治电小白菜
  • resource-router-middleware项目源码阅读

    resource-router-middleware是一个提供restful API的Express中间件,由preact作者developit开发。 一个简...

    用户1515472
  • SDN基础分析浅谈

    SDN(Software Defined Network)是个有意思的概念。ONF(Open Network Foundation)这样定义SDN: In th...

    静一
  • 2020-08-21

    用户7649162
  • Anaconda的安装及其环境变量的配置详解

    随着python的发展越来越好,用python的伙伴也越来越多。本人刚开始接触python的时候用的第一个集成环境就是Anaconda,因为自带很多包,安装又比...

    砸漏
  • flask 角色权限参考(flask 95)

    roles_permissions = db.Table('roles_permissions', db.Column('role_id', db.Integ...

    用户5760343
  • 直播网站源码开发时的几点误区

    但凡程序软件,都有源码,对于直播软件亦是如此。通过成品的直播网站源码可以快速实现直播平台开发搭建,是目前很受欢迎的一种直播软件开发方式。

    云豹通讯员
  • 上海交通大学吴晨涛:乐在三从

    编者按 2013年,腾讯与CCF联合发起“犀牛鸟”基金,旨在为青年学者搭建“让伟大的梦想变成现实的影响”的平台,助力青年学者的创新和成长,并为提升人类生活品质做...

    腾讯高校合作

扫码关注云+社区

领取腾讯云代金券