el-date-picker 限制选择范围最大为一年,设置快捷选项,设置默认时间

news/2024/7/24 9:09:19 标签: vue.js, elementui, javascript

el-date-picker 限制选择范围最大为一年:

主要代码为::picker-options="pickerOptions" 以及 @blur="pickerBlur"

        <el-date-picker
          v-model="transactionTime"
          type="daterange"
          style="width: 200px"
          size="small"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :picker-options="pickerOptions"
          clearable
          @blur="pickerBlur"
        />

设置快捷选项,设置禁用选项方法:

javascript">data() {
    return {
      transactionTime: null,
      pickDate: '', // 存放getPickDate获取的数据
      pickerOptions: {
        onPick: this.getPickDate,
        disabledDate: this.disabledDate,
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
    };
  },

设置禁用选项的方法(限制选择范围最大为一年):

javascript">  methods: {
    getPickDate(pick) {
      this.pickDate = pick
    },
    disabledDate(date) {
      const { minDate, maxDate } = this.pickDate
      if (minDate && !maxDate) {
        const diff = Math.abs(minDate.valueOf() - date.valueOf())
        // 日期选择范围不能大于一年
        if (diff > 1000 * 3600 * 24 * 365) {
          return true
        }
      }
    },
    pickerBlur(val) {
      this.pickDate = '' // 清空getPickDate获取的数据
    },
  }

设置 transactionTime 最开始的默认时间为三个月:

javascript">  created() {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
    this.transactionTime = [this.parseTime(start, '{y}-{m}-{d}'), this.parseTime(end, '{y}-{m}-{d}')]
  },

 其中parseTime方法为:

javascript">// 日期格式化
export function parseTime(time, pattern) {
	if (arguments.length === 0 || !time) {
		return null
	}
	const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
	let date
	if (typeof time === 'object') {
		date = time
	} else {
		if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
			time = parseInt(time)
		} else if (typeof time === 'string') {
			time = time.replace(new RegExp(/-/gm), '/');
		}
		if ((typeof time === 'number') && (time.toString().length === 10)) {
			time = time * 1000
		}
		date = new Date(time)
	}
	const formatObj = {
		y: date.getFullYear(),
		m: date.getMonth() + 1,
		d: date.getDate(),
		h: date.getHours(),
		i: date.getMinutes(),
		s: date.getSeconds(),
		a: date.getDay()
	}
	const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
		let value = formatObj[key]
		// Note: getDay() returns 0 on Sunday
		if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
		if (result.length > 0 && value < 10) {
			value = '0' + value
		}
		return value || 0
	})
	return time_str
}

如果重置搜索条件时需要重置回默认时间,记得重置方法内也要写入默认时间:

javascript">    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = this.$options.data().queryParams
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      this.queryParams.transactionTime = [this.parseTime(start, '{y}-{m}-{d}'), this.parseTime(end, '{y}-{m}-{d}')]
      this.handleQuery()
    },


http://www.niftyadmin.cn/n/5257778.html

相关文章

Eclipse 绘制架构图的插件

Eclipse 有很多绘制架构图的插件可供选择&#xff0c;以下是其中几个比较常用的插件&#xff1a; Papyrus&#xff1a;Papyrus 是 Eclipse 的一个可扩展的开源 UML 工具&#xff0c;可以用于绘制不同类型的架构图&#xff0c;包括类图、时序图、活动图等。它提供了一个直观的界…

(第68天)DBCA 克隆 PDB

介绍 在前面课程我们讲过使用 DBCA 创建数据库以及搭建 DataGuard 等功能,在多租户这章节,要讲下如何使用 DBCA 克隆 PDB。 18C 开始支持使用 DBCA 在本地 CDB 中克隆 PDB19C 升级支持使用 DBCA 克隆 PDB 到远端 CDB 中19C 升级支持使用 DBCA 重定向迁移 PDB 到远端 CDB 中本…

数据结构之优先级队列(堆)及top-k问题讲解

&#x1f495;"哪里会有人喜欢孤独&#xff0c;不过是不喜欢失望。"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;数据结构之优先级队列(堆) 一.优先级队列 1.概念 我们已经学习过队列&#xff0c;队列是一种先进先出(FIFO)的数据结构&#xff…

解决javax.net.ssl.SSLHandshakeException: Received fatal alert: handshake_failure

开发过程中没有出现这个问题&#xff0c;出现这个问题是发现自定义的一个JRE少了一个jdk.crypto.ec模块导致的。 参考&#xff1a; javafx 16 WebEngine Exception "SSL Handshake failed" - Stack Overflow

收款码在线生成系统源码/开源layui前端框架/附多套前端UI模板/三合一收款码生成系统源码

源码简介&#xff1a; 收款码在线生成系统源码&#xff0c;它是采用开源layui前端框架&#xff0c;并且它附多套前端UI模板&#xff0c;作为三合一收款码生成系统源码&#xff0c;界面简洁大方。 Layui前端的多合一收款码在线生成系统源码&#xff0c;附带了多套精美的前端UI…

基于51单片机的语音识别控制系统

0-演示视频 1-功能说明 &#xff08;1&#xff09;使用DHT11检测温湿度&#xff0c;然后用LCD12864显示&#xff0c;语音播放&#xff0c;使用STC11l08xe控制LD3320做语音识别&#xff0c; &#xff08;2&#xff09;上电时语音提示&#xff1a;欢迎使用声音识别系统&#xf…

class类实现operator==重载

利用 operator实现重载&#xff0c;实现两个类进行比较 1.不带参数的函数 #include <iostream> #include <string> using namespace std;class Person // 1.定义一个类 { public:Person(string name, int age){this->name name;this->age age;…

「Swift」Xcode多Target创建

前言&#xff1a;我们日常开发中会使用多个环境&#xff0c;如Dev、UAT&#xff0c;每个环境对应的业务功能都不同&#xff0c;但每个环境之间都只存在较小的差异&#xff0c;所以此时可以使用创建多个Target来实现&#xff0c;每个Target对应这个一个App&#xff0c;可以实现一…