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

学无止境,谦卑而行.

目录
相关文章
|
6月前
|
JavaScript
【实用模板】Vue代码文件常用创建或编辑抽屉
【实用模板】Vue代码文件常用创建或编辑抽屉
|
小程序
VSCode插件 Beautify格式化微信小程序wxml属性换行显示
VSCode插件 Beautify格式化微信小程序wxml属性换行显示
1704 0
|
6月前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
4月前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
528 0
|
6月前
|
前端开发 API
【亮剑】在Web开发中,我们经常需要使用下拉选择框(Select)来让用户从多个选项中选择一个
【4月更文挑战第30天】在React Web开发中,创建下拉选择框通常使用`<select>`标签。要设置占位符,可添加一个`value=""`的`<option>`标签。
206 0
|
6月前
|
小程序
微信小程序日期下拉框规定显示年,月
微信小程序日期下拉框规定显示年,月
224 0
|
6月前
|
JavaScript
vue使日历组件点击时间渲染到时间输入框
vue使日历组件点击时间渲染到时间输入框
94 0
vue3+elementplus后台管理系统,实现侧边栏菜单显示到主内容区域
vue3+elementplus后台管理系统,实现侧边栏菜单显示到主内容区域
|
JSON 小程序 前端开发
小程序模板语法样式与页面配置
小程序模板语法样式与页面配置
174 1
小程序模板语法样式与页面配置