日常做项目中经常会遇到根据周、月、季度、年的日期时间选择器，切换不同的时间时选择器也做出相对应的变化，并且获取相对的开始时间和结束时间。
效果如下:
1.先创建子组件--季度的日期选择器
1 <template>
2 <div class="time_quarter">
3 <mark style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;" v-show="showSeason"
4 @click.stop="showSeason = false"></mark>
5 <el-input placeholder="请选择季度" v-model="showValue" style="width:100%;" class="elWidth" @focus="showSeason = true">
6 <i slot="prefix" class="el-input__icon el-icon-date"></i>
7 </el-input>
8 <el-card class="box-card" v-show="showSeason" style="width:100%">
9 <div slot="header" class="clearfix" style="text-align:center;padding:0">
10 <button type="button" aria-label="前一年"
11 class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left" @click="prev"></button>
12 <span role="button" class="el-date-picker__header-label">{{ year }}年</span>
13 <button type="button" aria-label="后一年" @click="next" :class="{ notallow: year == limitTime }"
14 class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"></button>
15 </div>
16 <div class="text item" style="text-align:center;">
17 <el-button type="text" size="medium" style="width:40%;color: #606266;float:left;"
18 @click="selectSeason(0)">第一季度</el-button>
19 <el-button type="text" size="medium" style="float:right;width:40%;color: #606266;"
20 @click="selectSeason(1)">第二季度</el-button>
21 </div>
22 <div class="text item" style="text-align:center;">
23 <el-button type="text" size="medium" style="width:40%;color: #606266;float:left;"
24 @click="selectSeason(2)">第三季度</el-button>
25 <el-button type="text" size="medium" style="float:right;width:40%;color: #606266;"
26 @click="selectSeason(3)">第四季度</el-button>
27 </div>
28 </el-card>
29 </div>
30 </template>
31 <script>
32 export default {
33 props: {
34 valueArr: {
35 default: () => {
36 return ['01-03', '04-06', '07-09', '10-12'];
37 },
38 type: Array,
39 },
40 getValue: {
41 default: () => { },
42 type: Function,
43 },
44 // 传入显示的时间
45 defaultValue: {
46 default: "",
47 type: String,
48 },
49 // 限制的时间
50 limitTime: {
51 type: String,
52 default: "",
53 require: true,
54 },
55 },
56 data() {
57 return {
58 showSeason: false,
59 season: "",
60 year: new Date().getFullYear(),
61 showValue: ''
62 };
63 },
64 computed: {},
65 created() {
66 if (this.defaultValue) {
67 let value = this.defaultValue;
68 let arr = value.split("-");
69 this.year = arr[0].slice(0, 4);
70
71 var myseason = arr[1];
72 this.showValue = `${this.year}年${this.whitchQuarter(myseason)}季度`;
73 }
74 console.log("whitchQuarter", this.whitchQuarter(10));
75 },
76 watch: {
77 defaultValue: function (value, oldValue) {
78 let arr = value.split("-");
79 this.year = arr[0].slice(0, 4);
80 var myseason = arr[1];
81 this.showValue = `${this.year}年${this.whitchQuarter(myseason)}季度`;
82 },
83 },
84 methods: {
85 // 根据输入的月份判断是哪一个季节
86 whitchQuarter(month) {
87 let quarter = "";
88 month = Number(month);
89 switch (month) {
90 case 1:
91 case 2:
92 case 3:
93 quarter = "1";
94 break;
95 case 4:
96 case 5:
97 case 6:
98 quarter = "2";
99 break;
100 case 7:
101 case 8:
102 case 9:
103 quarter = "3";
104 break;
105 case 10:
106 case 11:
107 case 12:
108 quarter = "4";
109 break;
110 default:
111 console.error("The entered time is incorrect");
112 }
113 return quarter;
114 },
115 one() {
116 this.showSeason = false;
117 },
118 prev() {
119 this.year = this.year * 1 - 1;
120 },
121 next() {
122 // 如果有时间限制的话会进行判断
123 if (this.limitTime == "") {
124 this.year = this.year * 1 + 1;
125 } else if (this.limitTime != "" && this.year < this.limitTime) {
126 this.year = this.year * 1 + 1;
127 }
128 },
129 // 季度时间判定
130 InitialTime(val) {
131 let num = "";
132 val = Number(val);
133 switch (val) {
134 case 1:
135 num = "01";
136 break;
137 case 2:
138 num = "04";
139 break;
140 case 3:
141 num = "07";
142 break;
143 case 4:
144 num = "10";
145 break;
146 default:
147 console.error("时间格式有误！");
148 }
149 return num;
150 },
151
152 selectSeason(i) {
153 let that = this;
154 that.season = i + 1;
155 let arr = that.valueArr[i].split("-");
156 that.getValue(that.year + arr[0] + "-" + that.year + arr[1]);
157 that.showSeason = false;
158 this.showValue = `${this.year}年${this.season}季度`;
159 var formatValue = `${this.year}-${this.InitialTime(this.season)}`;
160 this.$emit("getTime", formatValue);
161 }
162 },
163 };
164 </script>
165 <style>
166 .notallow {
167 cursor: not-allowed;
168 }
169 .time_box {
170 position: relative;
171 }
172 .box-card {
173 position: absolute;
174 top: 40px;
175 /* left: 22px; */
176 padding: 0 3px 20px;
177 z-index: 9999;
178 }
179 .time_quarter {
180 width: 100%;
181
182 }
183 .time_quarter .el-input--small .el-input__inner {
184 width: 82%;
185 }</style>
2.父组件
以下是日期选择器切换时的时间换算
1 //获取周的开始时间和结束时间
2 getMonday(type, dates) {
3 var now = new Date();
4 var nowTime = now.getTime();
5 var day = now.getDay();
6 var longTime = 24 * 60 * 60 * 1000;
7 var n = longTime * 7 * (dates || 0);
8 if (type == "s") {
9 var dd = nowTime - (day - 1) * longTime + n;
10 };
11 if (type == "e") {
12 var dd = nowTime + (7 - day) * longTime + n;
13 };
14 dd = new Date(dd);
15 var y = dd.getFullYear();
16 var m = dd.getMonth() + 1;
17 var d = dd.getDate();
18 m = m < 10 ? "0" + m : m;
19 d = d < 10 ? "0" + d : d;
20 var day = y + "-" + m + "-" + d;
21 return day;
22 },
23 //周
24 changeTime(data) {
25 let date = new Date(data);
26 let y = date.getFullYear();
27 let m = date.getMonth();
28 let d = date.getDate();
29 let week = date.getDay();
30 let start = new Date(y, m, d - week + 1);
31 let end = new Date(y, m, d - week + 7);
32 this.queryParams.startTime = this.getCurrentTime(start, 0) + " 00:00:00";
33 this.queryParams.endTime = this.getCurrentTime(end, 0) + " 23:59:59";
34 },
35 //月
36 changeTimeM(data) {
37 this.queryParams.startTime = this.getCurrentTime(data, 0) + " 00:00:00";
38 this.queryParams.endTime = this.getCurrentTime(this.getCuurrentTimeM(data), 0) + " 23:59:59";
39 console.log(this.queryParams)
40 },
41 //年
42 changeTimeY(data) {
43 this.queryParams.startTime = this.getCurrentTime(data, 0) + " 00:00:00";
44 this.queryParams.endTime = this.getCurrentTime(this.getCuurrentTimeY(data), 0) + " 23:59:59";
45 console.log(this.queryParams)
46 },
47 getCurrentTime(data, num) {
48 let date = new Date(data)
49 let Y = date.getFullYear()
50 let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
51 let D = date.getDate() + num < 10 ? ('0' + (date.getDate() + num)) : (date.getDate() + num);
52 date = Y + '-' + M + '-' + D;
53 return date
54 },
55 getCuurrentTimeM(data) {
56 let date = new Date(data)
57 let Y = date.getFullYear();
58 let M = date.getMonth();
59 return new Date(Y, M + 1, 0).toLocaleDateString();
60 },
61 getCuurrentTimeY(data) {
62 let date = new Date(data)
63 let Y = date.getFullYear();
64 return new Date(Y, 11, 31).toLocaleDateString();
65 },
66 //获得某月的天数
67 getMonthDays: function (nowYear, myMonth) {
68 var monthStartDate = new Date(nowYear, myMonth, 1);
69 var monthEndDate = new Date(nowYear, myMonth + 1, 1);
70 var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
71 return days;
72 },
73 //获得本季度的结束日期
74 getQuarterEndDate(data) {
75 let date = new Date(data);
76 let nowYear = date.getFullYear();
77 let M = date.getMonth();
78 var quarterEndMonth = M + 2;
79 var quarterStartDate = new Date(nowYear, quarterEndMonth, this.getMonthDays(nowYear, quarterEndMonth));
80 return this.getAllDate(quarterStartDate, "yyyy-MM-dd");
81 },
82 //获得本季度的开始月份
83 getQuarterStartMonth: function (nowMonth) {
84 var quarterStartMonth = 0;
85 if (nowMonth < 3) {
86 quarterStartMonth = 0;
87 }
88 if (2 < nowMonth && nowMonth < 6) {
89 quarterStartMonth = 3;
90 }
91 if (5 < nowMonth && nowMonth < 9) {
92 quarterStartMonth = 6;
93 }
94 if (nowMonth > 8) {
95 quarterStartMonth = 9;
96 }
97 return quarterStartMonth;
98 },
99 //获得日期
100 getAllDate: function (date, fmt) {
101 if (null == fmt || undefined == fmt || "" == fmt)
102 fmt = "yyyy/MM/dd";
103 var date = new Date(date);
104 var o = {
105 "M+": date.getMonth() + 1, //月份
106 "d+": date.getDate(), //日
107 };
108 if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
109 for (var k in o)
110 if (new RegExp("(" + k + ")").test(fmt))
111 fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
112 return fmt;
113 },
114 getmgTime(data) {
115 let start = data + "-01";
116 this.queryParams.startTime = start + " 00:00:00";
117 let end = this.getQuarterEndDate(start);
118 this.queryParams.endTime = end + " 23:59:59";
119 },
120 watch: {
121 //监听内容
122 timeType() {
123 if (this.timeType == 1) {//周
124 this.value2 = new Date(new Date().valueOf());
125 this.queryParams.startTime = this.getMonday("s", 0) + " 00:00:00";
126 this.queryParams.endTime = this.getMonday("e", 0) + " 23:59:59";
127 } else if (this.timeType == 2) {//月
128 this.value2 = new Date().getFullYear() + '-' + (new Date().getMonth() + 1);
129 this.changeTimeM(this.value2);
130 } else if (this.timeType == 3) {//季度
131 let date = new Date();
132 let y = date.getFullYear();
133 let M = date.getMonth();
134 let quarterStartDate = new Date(y, this.getQuarterStartMonth(M), 1);
135 let starts = this.getAllDate(quarterStartDate, "yyyy-MM-dd");
136 let end = this.getQuarterEndDate(starts);
137 this.queryParams.startTime = starts + " 00:00:00";
138 this.queryParams.endTime = end + " 23:59:59";
139 } else if (this.timeType == 4) {//年
140 let date = new Date();
141 let y = date.getFullYear();
142 this.value2 = y.toString();
143 this.changeTimeY(this.value2);
144 }
145 }
146 },
标签：var,element,Date,let,new,date,ui,data,选择器 From： https://www.cnblogs.com/yuwenjing0727/p/17577898.html