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

学无止境,谦卑而行.

目录
相关文章
|
12月前
|
存储
uniapp全选功能制作
uniapp全选功能制作
75 0
SwiftUI—方便用户选择日期的DatePicker日期拾取器
SwiftUI—方便用户选择日期的DatePicker日期拾取器
1595 0
SwiftUI—方便用户选择日期的DatePicker日期拾取器
|
3月前
|
小程序 数据库
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
68 0
|
5月前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
5月前
|
前端开发 API
【亮剑】在Web开发中,我们经常需要使用下拉选择框(Select)来让用户从多个选项中选择一个
【4月更文挑战第30天】在React Web开发中,创建下拉选择框通常使用`<select>`标签。要设置占位符,可添加一个`value=""`的`<option>`标签。
145 0
|
5月前
|
JavaScript
点击导出所选数据(原生js)
点击导出所选数据(原生js)
33 0
|
5月前
|
小程序
微信小程序日期下拉框规定显示年,月
微信小程序日期下拉框规定显示年,月
193 0
|
5月前
|
JavaScript
vue使日历组件点击时间渲染到时间输入框
vue使日历组件点击时间渲染到时间输入框
88 0
|
11月前
【VsCode】1.70.0 新版本好用功能分享 :代码函数名称浏览时固定(功能原称 sticky Scroll)
在Code 1.70.0 以后,新增功能:sticky Scroll 。 效果描述: 在浏览长函数的时候,可以将函数的名称定义部分固定在顶栏,类似冻结窗口,方便查看函数功能,不必再跳转。
361 0