首页 > 其他分享 >ElementUI——日期范围选择得快捷选项

ElementUI——日期范围选择得快捷选项

时间:2023-07-17 17:11:09浏览次数:38  
标签:选项 end ElementUI oDate start 快捷 new Date const

前言

element-ui的日期范围的快捷选项;

内容

pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '过去7天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '过去30天',
          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 oDate = new Date()
            oDate.setTime(oDate.getTime() - 3600 * 1000 * 24 * 7)
            const day = oDate.getDay()
            const start = new Date()
            const end = new Date()
            if (day == 0) {
              start.setDate(oDate.getDate() + 1)
              end.setDate(oDate.getDate() + 7)
            } else {
              start.setTime(oDate.getTime() - 3600 * 1000 * 24 * (day - 1))
              end.setTime(oDate.getTime() + 3600 * 1000 * 24 * (7 - day))
            }

            picker.$emit('pick', [start, end])
          }
        }, { text: '本周',
          onClick(picker) {
            const oDate = new Date()
            const day = oDate.getDay()
            const start = new Date()
            const end = new Date()
            if (day == 0) {
              start.setDate(oDate.getDate() + 1)
              end.setDate(oDate.getDate() + 7)
            } else {
              start.setTime(oDate.getTime() - 3600 * 1000 * 24 * (day - 1))
              end.setTime(oDate.getTime() + 3600 * 1000 * 24 * (7 - day))
            }
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '本月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setDate(1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '上月',
          onClick(picker) {
            const oDate = new Date()
            var year = oDate.getFullYear()
            var month = oDate.getMonth()
            var start, end
            if (month == 0) {
              year--
              start = new Date(year, 11, 1)
              end = new Date(year, 11, 31)
            } else {
              start = new Date(year, month - 1, 1)
              end = new Date(year, month, 0)
            }

            picker.$emit('pick', [start, end])
          }
        }, {
          text: '上季度',
          onClick(picker) {
            const oDate = new Date()
            let thisYear = oDate.getFullYear()
            const thisMonth = oDate.getMonth() + 1
            const n = Math.ceil(thisMonth / 3) 
            let prevN = n - 1
            if (n == 1) {
              thisYear--
              prevN = 4
            }
            const Month = prevN * 3 
            const start = new Date(thisYear, Month - 3, 1)
            const end = new Date(thisYear, Month, 0)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '本季度',
          onClick(picker) {
            const oDate = new Date()
            const thisYear = oDate.getFullYear()
            const thisMonth = oDate.getMonth() + 1
            const n = Math.ceil(thisMonth / 3) 
            const Month = n * 3 - 1
            const start = new Date(thisYear, Month - 2, 1)
            const end = new Date()
            picker.$emit('pick', [start, end])
          }
        }]
      },

标签:选项,end,ElementUI,oDate,start,快捷,new,Date,const
From: https://www.cnblogs.com/wangyang0210/p/17560645.html

相关文章

  • 3Ds max入门教程:快捷键命令和鼠标热键大全
    推荐:NSDT场景编辑器助你快速搭建可二次开发的3D应用场景起初,您可能需要花一些时间查找热键,但是一旦您使用它们记住了它们,它们将使您以至少两倍的速度产生结果。例如,当您进行建模(移动、缩放、旋转等)时,一只手放在鼠标上,您将有另一只手可以自由地按下其中一个热键。让我们从几个你......
  • 用户角色选项
    1.说明:我们希望在添加用户的时候能够进行权限的选择2.后端接口3.前端定义它写方法导入进来钩子函数调用每一次表单选完之后置空数组4.测试数据已经查到了,但是一堆报错我们将复选框绑定到了这个变量里面,它是个数组,我们要提前定义它再来5.说明由于我们......
  • linux 中 md5sum -c选项
     001、[root@PC1test01]#ls[root@PC1test01]#seq5>a.txt;seq3>b.txt##生成测试数据[root@PC1test01]#lsa.txtb.txt[root@PC1test01]#md5sumb.txt>md5.txt##生成b.txt的MD5值[root@PC1test01]#lsa.txtb.txtmd5.txt[root......
  • Perl学习笔记5_命令行选项
    目录1.Getopt::Long2.Getopt::Std1.Getopt::Long#使用模块useGetopt::Long;#选项初始值my$length=24;my$file="file.dat";my@run=();my$verbose=0;#处理选项#如果参数解析成功,$result=1,#如果参数解析失败(有未知选项或不符合要求),$result=0......
  • 电脑快捷键
    Ctrl+A全选Ctrl+C复制Ctrl+V粘贴Ctrl+X剪切Ctrl+Z撤销Ctrl+S保存shift+delete永久删除windows+e打开文件Windows+Shift+ESC打开任务管理器windows+tab切换应用键Alt+f4关闭窗口 ......
  • Windows常用快捷键
    Windows常用快捷键Ctrl+C:复制Ctrl+V:粘贴Ctrl+X:剪切Ctrl+S:保存Ctrl+Z:撤销Ctrl+A:全选Alt+F4:关闭窗口Win+R:运行程序Win+E:打开此电脑Ctrl+Shift+Esc:打开任务管理器......
  • IntelliJ IDEA中我最爱的10个快捷操作
    前言IntelliJIDEA提供了一些Java的快捷键,同样也可以帮助我们提高日常的开发效率。关于这些快捷操作,你知道那几个呢?1.psvm/main快速生成main()方法在日常开发中,我们经常需要写main()方法,这时候您也可以使用main或者psvm命令快速地帮助我们创建出main()方法。2.sout快速生成print......
  • java:不再支持源选项 5。请使用 6 或更高版本。
    <properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><maven.compiler.encoding>UTF-8</maven.compiler.encoding><java.version>10</java.version><maven.co......
  • 编译选项
    自动编译文件编译文件时,使用-w指令后,TS编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译。示例:tscxxx.ts-w 自动编译整个项目如果直接使用tsc指令,则可以自动将当前项目下的所有ts文件编译为js文件。但是能直接使用tsc命令的前提时,要先在项目根目录......
  • Vscode 设置别名路径和创建快捷模板
    设置别名路径创建jsconfig.json文件,配置@文件路径{"compilerOptions":{"baseUrl":"./","paths":{"@/*":["src/*"]}}} 创建快捷模板 文件->首选项->配置用户代码片段 新建全局代码片段文件......