添加日期范围选择器组件

package-lock.json

@@ -21,6 +21,7 @@
 				"axios": "^1.2.1",
 				"countup.js": "^2.3.2",
 				"cropperjs": "^1.5.13",
+				"dayjs": "^1.11.10",
 				"e-icon-picker": "^2.1.1",
 				"echarts": "^5.4.1",
 				"echarts-gl": "^2.0.9",
@@ -54,6 +55,7 @@
 				"xe-utils": "^3.5.7"
 			},
 			"devDependencies": {
+				"@types/luxon": "^3.3.3",
 				"@types/node": "^18.11.13",
 				"@types/nprogress": "^0.2.0",
 				"@types/sortablejs": "^1.15.0",
@@ -3540,6 +3542,12 @@
 				"@types/lodash": "*"
 			}
 		},
+		"node_modules/@types/luxon": {
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.3.3.tgz",
+			"integrity": "sha512-/BJF3NT0pRMuxrenr42emRUF67sXwcZCd+S1ksG/Fcf9O7C3kKCY4uJSbKBE4KDUIYr3WMsvfmWD8hRjXExBJQ==",
+			"dev": true
+		},
 		"node_modules/@types/node": {
 			"version": "18.18.4",
 			"license": "MIT"
@@ -4927,7 +4935,8 @@
 		},
 		"node_modules/dayjs": {
 			"version": "1.11.10",
-			"license": "MIT"
+			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+			"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
 		},
 		"node_modules/debounce": {
 			"version": "1.2.1",
@@ -11359,6 +11368,12 @@
 				"@types/lodash": "*"
 			}
 		},
+		"@types/luxon": {
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.3.3.tgz",
+			"integrity": "sha512-/BJF3NT0pRMuxrenr42emRUF67sXwcZCd+S1ksG/Fcf9O7C3kKCY4uJSbKBE4KDUIYr3WMsvfmWD8hRjXExBJQ==",
+			"dev": true
+		},
 		"@types/node": {
 			"version": "18.18.4"
 		},
@@ -12178,7 +12193,9 @@
 			"version": "2.2.0"
 		},
 		"dayjs": {
-			"version": "1.11.10"
+			"version": "1.11.10",
+			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+			"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
 		},
 		"debounce": {
 			"version": "1.2.1"

package.json

@@ -21,6 +21,7 @@
 		"axios": "^1.2.1",
 		"countup.js": "^2.3.2",
 		"cropperjs": "^1.5.13",
+		"dayjs": "^1.11.10",
 		"e-icon-picker": "^2.1.1",
 		"echarts": "^5.4.1",
 		"echarts-gl": "^2.0.9",
@@ -54,6 +55,7 @@
 		"xe-utils": "^3.5.7"
 	},
 	"devDependencies": {
+		"@types/luxon": "^3.3.3",
 		"@types/node": "^18.11.13",
 		"@types/nprogress": "^0.2.0",
 		"@types/sortablejs": "^1.15.0",

src/components/DateRange/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="dateRangeValue"
+      type="daterange"
+      unlink-panels
+      range-separator="To"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      :shortcuts="shortcuts"
+      size="default"
+      value-format="YYYY-MM-DD"
+      :disabled-date="disabledDate"
+      :clearable="false"
+      @change="$emit('change', dateRangeValue)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import dayjs, { Dayjs } from 'dayjs'
+
+const props = defineProps<{timezone: string}>()
+
+const dateRangeValue = ref([])
+
+
+function disabledDate(datetime: Date) {
+  const now = dayjs(new Date()).startOf('day')
+  const now_tz = now.tz(props.timezone)
+  return now_tz.isSameOrBefore(dayjs(datetime).tz(props.timezone))
+}
+
+function tzFormat(dt_tz: Dayjs) {
+  return dt_tz.format("YYYY-MM-DD HH:mm:ss")
+}
+
+function recentDays(days: number):string[] {
+  const now_tz = dayjs(new Date()).tz(props.timezone)
+  const start = now_tz.subtract(days, 'day')
+  const end = now_tz.subtract(1, 'day')
+  return [tzFormat(start), tzFormat(end)]
+}
+
+function currentWeekMonthYear(dim: 'month'|'week'|'year'): string[] {
+  const end = dayjs(new Date()).tz(props.timezone)
+  const start = end.startOf(dim)
+  return [tzFormat(start), tzFormat(end)]
+}
+
+function lastWeekMonthYear(dim: 'month'|'week'|'year'): string[] {
+  const last = dayjs(new Date()).tz(props.timezone).subtract(1, dim)
+  return [tzFormat(last.startOf(dim)), tzFormat(last.endOf(dim))]
+}
+
+const shortcuts = [
+  {
+    text: '今天',
+    value: () => {
+      const now_tz = dayjs(new Date()).tz(props.timezone)
+      return [tzFormat(now_tz), tzFormat(now_tz)]
+    },
+  },
+  {
+    text: '昨天',
+    value: () => recentDays(1)
+  },
+  {
+    text: '最近7天',
+    value: () => recentDays(7)
+  },
+  {
+    text: '最近15天',
+    value: () => recentDays(15)
+  },
+  {
+    text: '最近30天',
+    value: () => recentDays(30)
+  },
+  {
+    text: '本周',
+    value: () => currentWeekMonthYear('week')
+  },
+  {
+    text: '上周',
+    value: () => lastWeekMonthYear('week')
+  },
+  {
+    text: '本月',
+    value: () => currentWeekMonthYear('month')
+  },
+  {
+    text: '上月',
+    value: () => lastWeekMonthYear('month')
+  },
+  {
+    text: '本年',
+    value: () => currentWeekMonthYear('year')
+  }
+]
+</script>
+
+<style scoped>
+
+</style>

src/main.ts

@@ -33,6 +33,15 @@ import 'vxe-table/lib/style.css'
 import '/@/assets/style/reset.scss';
 import 'element-tree-line/dist/style.css'
 
+import dayjs from 'dayjs'
+import UTC from 'dayjs/plugin/utc'
+import Timezon from 'dayjs/plugin/timezone'
+import IsSameOrBefore from 'dayjs/plugin/isSameOrBefore'
+
+dayjs.extend(UTC)
+dayjs.extend(Timezon)
+dayjs.extend(IsSameOrBefore)
+
 let forIconfont = analyzingIconForIconfont(iconfont); //解析class
 iconList.addIcon(forIconfont.list); // 添加iconfont dvadmin3的icon
 iconList.addIcon(elementPlus); // 添加element plus的图标