前言
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]) } }] },
学无止境,谦卑而行.