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

学无止境,谦卑而行.

目录
相关文章
SwiftUI—方便用户选择日期的DatePicker日期拾取器
SwiftUI—方便用户选择日期的DatePicker日期拾取器
1649 0
SwiftUI—方便用户选择日期的DatePicker日期拾取器
|
6月前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
3月前
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
86 0
jeDate日期控件在项目中实际应用
jeDate日期控件在项目中实际应用
58 0
|
6月前
|
前端开发 API
【亮剑】在Web开发中,我们经常需要使用下拉选择框(Select)来让用户从多个选项中选择一个
【4月更文挑战第30天】在React Web开发中,创建下拉选择框通常使用`<select>`标签。要设置占位符,可添加一个`value=""`的`<option>`标签。
237 0
element-ui时间选择器限制只能点击不让输入(整理)
element-ui时间选择器限制只能点击不让输入(整理)
|
6月前
|
JavaScript
点击导出所选数据(原生js)
点击导出所选数据(原生js)
40 0
|
6月前
|
JavaScript
vue使日历组件点击时间渲染到时间输入框
vue使日历组件点击时间渲染到时间输入框
104 0
|
6月前
|
JavaScript 前端开发 容器
js使用表格生成一个日历,点击按钮上查看上个月,点击按钮下,查看下个月,月份,年份
js使用表格生成一个日历,点击按钮上查看上个月,点击按钮下,查看下个月,月份,年份
150 0