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

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

前言

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

可能需要梯子才能访问~

预览地址: https://codepen.io/pen?template=poQLxQW

内容

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])
          }
        }]
      },

学无止境,谦卑而行.

目录
打赏
0
0
0
0
67
分享
相关文章
|
10月前
如何实现右击DataGridView的表格出现快捷菜单进行操作
如何实现右击DataGridView的表格出现快捷菜单进行操作
63 0
SwiftUI—方便用户选择日期的DatePicker日期拾取器
SwiftUI—方便用户选择日期的DatePicker日期拾取器
1754 0
SwiftUI—方便用户选择日期的DatePicker日期拾取器
|
6月前
element table配合from实现双击可编辑表格
如何使用Element UI的el-table和el-form组件实现双击可编辑的表格。
130 0
使用扩展函数方式,在Winform界面中快捷的绑定树形列表TreeList控件和TreeListLookUpEdit控件
使用扩展函数方式,在Winform界面中快捷的绑定树形列表TreeList控件和TreeListLookUpEdit控件
elementui表格自定义表头的两种方法
这篇文章主要是总结了elementui-table表格怎么自定义表头,两种方式需求不一样,大家还有啥好的方法或者遇到的bug评论区留言大家一起解决。
1307 0
|
10月前
elementui实现表格单选功能
elementui实现表格单选功能