el-date-picker组件的picker-options常规属性设置

 

查询已发生的配置项 

// 日期选择器快捷键配置(一般过去时)
pickerOptions: {
    shortcuts: [
        {
            text: '今天',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '昨天',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                start.setDate(start.getDate() - 1);
                end.setDate(end.getDate() - 1);
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '迄今为止',
            onClick(picker) {
                let start = new Date('2000-01-01');
                let end = new Date();
                picker.$emit('pick', [start, end]);
            }
        },
        // ----------------------------------------
        {
            text: '近一周',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                start.setDate(start.getDate() - 7);
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '近一个月',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                start.setMonth(start.getMonth() - 1);
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '近三个月',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                start.setMonth(start.getMonth() - 3);
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '近一年',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                start.setDate(start.getDate() - 365);
                picker.$emit('pick', [start, end]);
            }
        },
        // ----------------------------------------
        {
            text: '上月',
            onClick(picker) {
                let lastMonth = new Date();
                lastMonth.setMonth(lastMonth.getMonth() - 1);
                let m = lastMonth.getMonth(), y = lastMonth.getFullYear();
                let start = new Date(y, m, 1);
                let end = new Date(y, m, new Date(y, m + 1, 0).getDate());
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '本月',
            onClick(picker) {
                let now = new Date(), m = now.getMonth(), y = now.getFullYear();
                let start = new Date(y, m, 1);
                let end = new Date(y, m, new Date(y, m + 1, 0).getDate());
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '今年',
            onClick(picker) {
                let start = new Date(new Date().getFullYear(), 0, 1);
                let end = new Date(new Date().getFullYear(), 11, 31);
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '去年',
            onClick(picker) {
                let start = new Date(new Date().getFullYear() - 1, 0, 1);
                let end = new Date(new Date().getFullYear() - 1, 11, 31);
                picker.$emit('pick', [start, end]);
            }
        },
    ]
},

 设置未来日期配置

// 日期选择器快捷键配置(一般将来时)
pickerOptions: {
    shortcuts: [
        {
            text: '今天',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '明天',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                start.setDate(start.getDate() + 1);
                end.setDate(end.getDate() + 1);
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '从今往后',
            onClick(picker) {
                let start = new Date();
                let end = new Date('2999-12-31');
                picker.$emit('pick', [start, end]);
            }
        },
        // ----------------------------------------
        {
            text: '往后一周',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                end.setDate(start.getDate() + 7);
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '往后一个月',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                end.setMonth(start.getMonth() + 1);
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '往后三个月',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                end.setMonth(start.getMonth() + 3);
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '往后一年',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                end.setDate(start.getDate() + 365);
                picker.$emit('pick', [start, end]);
            }
        },
        // ----------------------------------------
        {
            text: '本月',
            onClick(picker) {
                let now = new Date(), m = now.getMonth(), y = now.getFullYear();
                let start = new Date(y, m, 1);
                let end = new Date(y, m, new Date(y, m + 1, 0).getDate());
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '下个月',
            onClick(picker) {
                let nextMonth = new Date();
                nextMonth.setMonth(nextMonth.getMonth() + 1);
                let m = nextMonth.getMonth(), y = nextMonth.getFullYear();
                let start = new Date(y, m, 1);
                let end = new Date(y, m, new Date(y, m + 1, 0).getDate());
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '今年',
            onClick(picker) {
                let start = new Date(new Date().getFullYear(), 0, 1);
                let end = new Date(new Date().getFullYear(), 11, 31);
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '明年',
            onClick(picker) {
                let start = new Date(new Date().getFullYear() + 1, 0, 1);
                let end = new Date(new Date().getFullYear() + 1, 11, 31);
                picker.$emit('pick', [start, end]);
            }
        },
    ]
},

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/40610.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

uniapp微信小程序使用axios(vue3+axios+ts版)

版本号 "vue": "^3.2.45", "axios": "^1.4.0", "axios-miniprogram-adapter": "^0.3.5", 安装axios及axios适配器,适配小程序 yarn add axios axios-miniprogram-adapter 使用axios 在utils创建utils/…

Flask SQLAlchemy_Serializer ORM模型序列化

在前后端分离项目中,经常需要把ORM模型转化为字典,再将字典转化为JSON格式的字符串。在遇到sqlalchemy_serializer之前,我都是通过类似Java中的反射原理,获取当前ORM模型的所有字段,然后写一个to_dict方法来将字段以及…

计算机vcruntime140.dll丢失的解决方法,重新安装教程

vcruntime140.dll是Microsoft Visual C Redistributable文件中的一个动态链接库(DLL)。这个文件是由Microsoft开发的,用于支持C编程语言的运行环境。vcruntime140.dll是Windows系统非常重要的文件,通常会被一些应用程序或游戏所需…

Jenkins | 获取凭证密码

目录 方法一:查看所有账号及密码 方法二:查看指定账号密码 方法一:查看所有账号及密码 Jenkins > 系统管理 > 脚本命令行 com.cloudbees.plugins.credentials.SystemCredentialsProvider.getInstance().getCredentials().forEach{i…

Linux进程

Linux进程 对于进程的理解,我们要从计算机的重要的冯诺依曼体系结构讲起,只有知道我们的程序/文件是如何在计算机中被操作运行并输出到显示器中,通过对于操作系统的理解,才能对于进程进行一定的理解。 文章目录 Linux进程冯诺依…

【Linux】udp服务器实现大型网络聊天室

udp终结篇~ 文章目录 前言一、udp服务器实现大型网络聊天室总结 前言 根据上一篇文章中对于英汉互译和远程操作的两个小功能大家应该已经学会了,我们的目的是让大家可以深刻的理解udp服务器所需要的接口已经实现的简单步骤,下面我们开始实现网络聊天室。…

3.SpringBoot 返回Html界面

1.添加依赖spring-boot-starter-web <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency>2.创建Html界面 在Resources/static 文件夹下面建立对应的html&#xff0c…

快速排序的非递归实现、归并排序的递归和非递归实现、基数排序、排序算法的时间复杂度

文章目录 快速排序的非递归三数取中法选取key快速排序三路划分 归并排序的递归归并排序的非递归计数排序稳定性排序算法的时间复杂度 快速排序的非递归 我们使用一个栈来模拟函数的递归过程&#xff0c;这里就是在利用栈分区间。把一个区间分为 [left,keyi-1][key][keyi1,right…

用百度地图api获取当前定位,获取经纬度——前端笔记

问题&#xff1a; 做一个按钮&#xff0c;点击后可以获取到当前位置的经纬度&#xff0c;并渲染地图。 效果如下: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head><title>获取当前定位测试<…

【笔记MD】

https://editor.csdn.net/md/?not_checkout1&articleId131798584 这里写自定义目录标题 https://editor.csdn.net/md/?not_checkout1&articleId131798584欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入…

行业数据和报告到底应该如何去找?

信息时代&#xff0c;经常要对行业信息进行分析。这时首先就是要进行信息收集和筛选&#xff0c;如果我们懂得构建自己的工作工具和数据来源&#xff0c;效率会蹭蹭往上涨。 找行业报告、了解行业趋势&#xff0c;提高效率。 1. 国家权威 国家统计局&#xff1a;这个网站覆盖…

谋合作、创新境 | 百度参观图为科技生产全链路

当代科技的发展不断催生出新的变革和机遇&#xff0c;百度作为全球顶尖的高科技公司&#xff0c;凭借其强大的创新基因&#xff0c;一直处于人工智能领域的最前沿。   近日&#xff0c;百度公司派出了一支专业团队来到了图为科技&#xff0c;对图为的研发技术及生产线进行了全…

基于MSP432P401R跟随小车【2022年电赛C题】

文章目录 一、赛前准备1. 硬件清单2. 工程环境 二、赛题思考三、软件设计1. 路程、时间、速度计算2. 距离测量3. 双机通信4. 红外循迹 四、技术交流 一、赛前准备 1. 硬件清单 主控板&#xff1a; MSP432P401R测距模块&#xff1a; GY56数据显示&#xff1a; OLED电机&#x…

基于单片机智能台灯坐姿矫正器视力保护器的设计与实现

功能介绍 以51单片机作为主控系统&#xff1b;LCD1602液晶显示当前当前光线强度、台灯灯光强度、当前时间、坐姿距离等&#xff1b;按键设置当前时间&#xff0c;闹钟、提醒时间、坐姿最小距离&#xff1b;通过超声波检测坐姿&#xff0c;当坐姿不正容易对眼睛和身体腰部等造成…

Git 使用笔记

Git使用笔记 1 版本控制 1.1 什么是版本控制 ​ 版本控制&#xff08;Revision control&#xff09;是一种在开发的过程中用于管理我们对文件、目录或工程等内容的修改历史&#xff0c;方便查看更改历史记录&#xff0c;备份以便恢复以前的版本的软件工程技术。简单说就是用…

大模型开发(六):OpenAI Completions模型详解并实现多轮对话机器人

全文共8500余字&#xff0c;预计阅读时间约17~30分钟 | 满满干货(附代码)&#xff0c;建议收藏&#xff01; 代码下载点这里 一、 Completions与Chat Completions基本概念 经过海量文本数据训练的大模型会在全量语义空间内学习语法关系和表达风格&#xff0c;并通过某些微调过…

postgresql部署及优化

目录 一、postgresql概念 二、PostgreSQL 特征 三、postgres安装与登录 3.1、postgres安装 3.2、postgres使用 3.3.1、postgres登录 3.3.2、修改postgres用户密码 四、PostgreSQL 命令 4.1、PostgreSQL 创建数据库 4.2、删除数据库 4.3、创建表格 4.4、删除表格 一、…

Python爬虫学习笔记(一)————网页基础

目录 1.网页的组成 2.HTML &#xff08;1&#xff09;标签 &#xff08;2&#xff09;比较重要且常用的标签&#xff1a; ①列表标签 ②超链接标签 &#xff08;a标签&#xff09; ③img标签&#xff1a;用于渲染&#xff0c;图片资源的标签 ④div标签和span标签 &…

【MySQL】MySQL在Centos7环境下安装

目录 一、卸载不要的环境 1.1、查看是否有安装mysql 1.2、关闭运行的程序 1.3、卸载安装 二、配置yum 源 2.1、下载yum 源 2.2 安装yum源 2.3 查看是否已经生效 三、安装mysql服务 四、启动服务 五、登录方法 方法一&#xff08;不行就下一个&#xff09; 方法二&#xff08;不…

【Tauri + React 实战】VCluster - 了解技术选型与开发环境配置

VCluster A React Tauri App as visualizer of apps cluster on windows. 背景介绍 VCluster是一个在开发环境下&#xff0c;用以对一系列应用集群&#xff08;如分布式、微服务&#xff09;进行可视化管理的桌面应用程序&#xff0c;目标是实现类似 docker-compose 那样的集…
最新文章